Kendo UI網格選擇

Question

我有一個驅動程序表：

Index.cshtml

@model IEnumerable<Dal.Driver>

    @(Html.Kendo().Grid(Model)
      .Name("OrdersGrid")
      .Columns(columns =>
      {
          columns.Bound(o => o.Name);
          columns.Bound(o => o.FamilyName);
          columns.Bound(o => o.Licence);
          columns.Bound(o => o.ExperienceYears);
      })
      .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(o => o.Id)))
      .Selectable(select => select.Enabled(true))
      .Events(e => e.Change())
      .Pageable()
      .Sortable()
      .Filterable()
      .Groupable()
    )

當客戶端選擇驅動程序時，我想添加一個可以導航到其他頁面的乘法按鈕。

我該怎么做？

Answer 1

下面的代碼用於啟用網格選擇。 有不同的模式，例如“多”，“單”和“類型”（如“單元格”等）

@(Html.Kendo().Grid<Model>()
    .Name("OrdersGrid")
    .Columns(columns => {
        columns.Bound(o => o.ShipCountry).Width(200);
    })
    .Pageable(pageable => pageable.ButtonCount(5))
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Multiple))
    .Navigatable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .Read(read => read.Action("Orders_Read", "Grid"))
     )
);

下面的代碼提供了Select Event，您將在其中獲取所選列或行名稱以及索引的詳細信息

$(OrdersGrid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", OrdersGrid.tbody).index(row);
var colIdx = $("td", row).index(this);
var colName = $('#OrdersGrid').find('th').eq(colIdx).text()
alert("Selected cell on row: " + rowIdx + " and column name: " + colName);
});