如何获得Kendo网格行选择

Question

如何启用kendo ui网格行选择.我通过使用html帮助函数创建了一个kendo网格,通过javascript访问它并启用了行选择,但下面没有显示运气代码

@(Html.Kendo().Grid((IEnumerable<Gridkendo.Models.Model>)Model)
  .Name("grid")
  .Columns(columns =>
  {
      // Create a column bound to the ProductID property
      columns.Bound(product => product.Name);
      // Create a column bound to the ProductName property
      columns.Bound(product => product.Description);

并在JavaScript中访问它

<script>
    $(function () {
        // Notice that the Name() of the grid is used to get its client-side instance
        var grid = $("#grid").data("kendoGrid");
        var selectedItem = grid.dataItem(grid.select());
        alert(selectedItem.ShipName);
    });
</script>

Answer 1

您需要添加Selectable()配置方法.这将启用默认行选择,

@(Html.Kendo().Grid((IEnumerable<Gridkendo.Models.Model>)Model)
  .Name("grid")
  .Columns(columns =>
  {
      // Create a column bound to the ProductID property
      columns.Bound(product => product.Name);
      // Create a column bound to the ProductName property
      columns.Bound(product => product.Description);
  })
  .Selectable()
)

请注意,您将在document ready事件中获取所选项目.这意味着网格刚刚初始化,并且不可能选择任何行.更好的方法是使用可在辅助器中配置的"select"事件:

@(Html.Kendo().Grid((IEnumerable<Gridkendo.Models.Model>)Model)
  .Name("grid")
  .Columns(columns =>
  {
      // Create a column bound to the ProductID property
      columns.Bound(product => product.Name);
      // Create a column bound to the ProductName property
      columns.Bound(product => product.Description);
  })
  .Selectable()
  .Events(ev => ev.Change("doOnRowSelect"))
)

然后,您需要定义doOnRowSelectJavaScript函数:

function doOnRowSelect(e) {
    var selectedItem = this.dataItem(this.select());
    alert(selectedItem.ShipName);
}

编辑:上面的方法(至少JavaScript部分)只有在通过AJAX加载数据时才有效.但是,当从中加载数据时,行选择也应该起作用Model.在这种护理中,所选行将具有以下k-state-selected类:

function getSelectedItem () {
    var grid = $("#grid").data("kendoGrid");
    var selectedRows = $(".k-state-selected", "#grid");
    if (selectedRows.length > 0) {
       var selectedItem = grid.dataItem(selectedRows[0]);
       alert(selectedItem.ShipName);
    }
}