1

在 MVC 程序中，我使用 Kendo Grid 来显示数据项列表（在本例中为设施）。网格模型包含比显示更多的列，并且我在网格旁边有一个单独的区域，这些值显示供用户编辑。当用户更改值时，它们会反映在 Grid 的数据源中。如果用户在未保存的情况下移动到另一行，则会提示他们保存更改。

网格的代码：

    @(Html.Kendo().Grid(Model)    
    .Name("FacilityGrid")       
    .Columns(columns => {
        columns.Bound(p => p.Name).Width(100);
        columns.Bound(p => p.ShortDescription).Width(150);
        })
    .ToolBar(toolbar => toolbar.Create().Text("Add New Facility"))
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("FacilityPopup"))
    .Pageable()
    .Resizable(resize => resize.Columns(true)) 
    .Sortable()
    .Selectable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Model(model => 
            {
                model.Id(p => p.FacilityID); 
                model.Field(p=>p.FacilityID).DefaultValue(new Guid("00000000-0000-0000-0000-000000000000"));
            })
        .Read(read => read.Action("Facility_Read", "Setup"))
        .Create(update => update.Action("Facility_Create", "Setup"))
        .Update(update => update.Action("Facility_Update", "Setup"))
        .Destroy(update => update.Action("Facility_Destroy", "Setup"))
        )
        .Events(events => events
        // Subscribe to the "change" event.
        .Change("rowChange")
        )

现在我只有一些输入来编辑附加数据：

    <p id="FacilityID"> </p>
    <p> Facility Name: <input ID="Name" class="GridLinked" type="text"></p>
    <p> Description: <input ID="Description" class="GridLinked" type="text"></p>
    <p> Address 1: <input ID="Address1" class="GridLinked" type="text"></p>
    <p> Address 2: <input ID="Address2" class="GridLinked" type="text"></p>
    <p> City: <input ID="City" class="GridLinked" type="text"></p>
    <p> State: <input ID="State" class="GridLinked" type="text"></p>
    <p> Country: <input ID="Country" class="GridLinked" type="text"></p>

这些值是在网格的更改事件上设置的

function rowChange(e) { 
    // handle the "change" event
    // Get the values from the Grid to display in the detail area
    $("#Name").val(this.dataItem(this.select()).Name);
    $("#FacilityID").text(this.dataItem(this.select()).FacilityID);
    $("#Description").val(this.dataItem(this.select()).Description);
    $("#Address1").val(this.dataItem(this.select()).Address1);
    $("#Address2").val(this.dataItem(this.select()).Address2);
    $("#City").val(this.dataItem(this.select()).City);
    $("#State").val(this.dataItem(this.select()).State);
    $("#Country").val(this.dataItem(this.select()).Country);

    if (this.dataSource.hasChanges()) {
        if (confirm("You have unsaved changes. Do you want to save them?")) {
            $('#FacilityGrid').data('kendoGrid').saveChanges();
        }
        else {
            $('#FacilityGrid').data('kendoGrid').cancelChanges();
        }
    };
}

并且网格的数据源随着输入字段的更改而更新。

 $(".GridLinked").change(function (event) {
     var grid = $('#FacilityGrid').data('kendoGrid');
// See if there are any pending changes
   debugger;

     var cell = event.target;
     var selectedRow = grid.select();
     var selectedRowIndex = selectedRow.index();
     grid.dataSource.data()[selectedRowIndex].set(cell.id, cell.value);
     grid.select(selectedRowIndex);
    // Set the focus back to the Grid
});

我面临的问题是，当在网格中设置单元格值时，焦点指示器（突出显示的行）消失，当我尝试再次将其设置回来（使用 Grid.select(selectedRowIndex)）时，它会导致 rowChange 事件在网格上开火，我的处理程序抛出错误

JavaScript runtime error: Unable to get property 'Name' of undefined or null reference

有没有人对如何对网格中的选定行设置某种指标有任何建议？

这是一个很好的设计实践，直接操作网格数据源吗？

4

1 回答 1

0

您可以通过使用 dataSource.view() 绘制选定的网格来突出显示选定的行。我会建议您在 rowChange 事件中执行以下操作

var cell = event.target;  var selectedRow = grid.select();   
var selectedRowIndex = selectedRow.index() 
var dataView = this.dataSource.view();  
$("#FacilityGrid tbody").find("tr[data-uid=" + selectedRowIndex + "]").css("backgroundcolor", "grey");

希望这会有所帮助......快乐的编码

于 2013-10-03T08:54:19.700 回答