如何获得剑道网格行选择

Question

如何启用 kendo ui 网格行选择。我使用 html 辅助函数创建了一个剑道网格，通过 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 事件中获得选定的项目。这意味着网格刚刚被初始化，并且不可能选择任何行。更好的方法是使用“选择”事件，可以在帮助程序中配置：

@(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"))
)

然后您需要定义doOnRowSelect JavaScript 函数：

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);
    }
}