Question

在MVC程序中，我使用Kendo Grid来显示数据项列表（在本例中为Facilities）。网格模型包含的列数多于显示的列数。网格旁边有一个单独的区域，显示这些值供用户编辑。当用户更改值时，它们会反映在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

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

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

Answer 1

您可以使用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");

希望这有助于...快乐编码

使用JavaScript更新Kendo Grid时保持行焦点

1 个答案: