Kendo UI Grid-如何在KendoUI中获取选定行的值

一个kendoUI网格

 @(Html.Kendo().Grid<EntityVM>()
                    .Name("EntitesGrid")
                                .HtmlAttributes(new { style = "height:750px;width:100%;scrollbar-face-color: #eff7fc;" })
                    .Columns(columns =>
                    {
                        columns.Bound(e => e.Id).Hidden().IncludeInMenu(false);
                        columns.Bound(e => e.EntityVersionId).Hidden().IncludeInMenu(false);
                        columns.Bound(e => e.Name).Width("70%").Title("Entity Name");
                        columns.Bound(e => e.EIN).Width("30%");
                    })
        .ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext k-grid-add' id='addEntity'><span class='k-icon k-add'></span>Entity</a>" +
             "<a class='k-button k-button-icontext' id='editEntity'><span class='k-icon k-edit'></span>Edit</a>"))
                    .DataSource(dataSource => dataSource
                    .Ajax().ServerOperation(false)
                    .Model(model => model.Id(e => e.Id))
                    .Read(read => read.Action("GetEntities", "Entity", new { projectId = Request.QueryString[DataKeyNameConstants.ProjectId] })))
                    .Sortable()
                    .Scrollable()
                    .Filterable()
                    .Resizable(resize => resize.Columns(true))
                    .Reorderable(reorder => reorder.Columns(true))
                    .ColumnMenu()
                    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
                    .Events(events => events.Change("entSelChange"))
            )

现在，我需要从选定的行中获取EntityVersionId的值。（其实不管哪个值都行，包括隐藏的）

一种方法是使用Grid的select()和select()方法。

在单选（GridSelectionMode.Single）情况下，select()将返回单行，可以将其传递给dataItem()

var entityGrid = $("#EntitesGrid").data("kendoGrid");
var selectedItem = entityGrid.dataItem(entityGrid.select());
// selectedItem has EntityVersionId and the rest of your model

对于多行选择（GridSelectionMode.Multiple），select()将返回一个行数组。 然后，您可以遍历数组，并且可以将各个行传递到网格的dataItem()中。

var entityGrid = $("#EntitesGrid").data("kendoGrid");
var rows = entityGrid.select();
rows.each(function(index, row) {
  var selectedItem = entityGrid.dataItem(row);
  // selectedItem has EntityVersionId and the rest of your model
});

有更好的方法。 我在使用kendo angularJS指令且网格没有ID的页面中使用它...（这个没测试，不晓得对错）

change: function (e) {
   var selectedDataItem = e != null ? e.sender.dataItem(e.sender.select()) : null;
}

我认为需要检查是否选择了任何行？以下代码将对其进行检查：

var entityGrid = $("#EntitesGrid").data("kendoGrid");
            var selectedItem = entityGrid.dataItem(entityGrid.select());
            if (selectedItem != undefined)
                alert("The Row Is SELECTED");
            else
                alert("NO Row Is SELECTED")

如果要选择特定元素，请使用以下代码

var gridRowData = $("<your grid name>").data("kendoGrid");
var selectedItem = gridRowData.dataItem(gridRowData.select());
var quote = selectedItem["<column name>"];

以上来自：https://stackoverflow.com/questions/12964498/how-to-get-selected-row-value-in-the-kendoui

我整合了一下

    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Multiple )
        .Type(GridSelectionType.Row))

   $(".k-grid-getgriddata").click(function (e) {//按钮单击事件
        var grid = $("#xzcsbmgrid").data("kendoGrid");
        var options = grid.getOptions();
        //https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/getoptions
        //console.log(options.selectable); 
        if (options.selectable.indexOf("Single")>0) {
            //单行
            var selectedItemSingle = grid.dataItem(grid.select());
            if (selectedItemSingle != undefined) {

                console.log(selectedItemSingle.length);
                //alert("The Row Is SELECTED");
            }
            else
                alert("NO Row Is SELECTED");
            var quote = selectedItemSingle["csmc"];
            //console.log(quote);
        }
        else {
            //多行
            var rows = grid.select();
            //console.log(rows.length);
            rows.each(function (index, row) {
                var selectedItemMultiple = grid.dataItem(row);
                //console.log(selectedItemMultiple["csmc"]);
                // selectedItem has EntityVersionId and the rest of your model
            });
        }
    });

行双击绑定

$("#xzcsbmgrid tbody").on("dblclick", "td", function (e) {//https://www.telerik.com/forums/template-click-event-within-a-grid-column
        var grid = $("#xzcsbmgrid").getKendoGrid();
        //var cellElement = this;
        //var cell = $(cellElement);
        //var grid2 = $("#usersGrid").data("kendoGrid");
        //var selectedItem = grid2.dataItem(grid2.select());
        //console.log(selectedItem);
        var row = $(this).closest("tr");
        console.log(row);
        var curRowIdx = $("tr", grid.tbody).index(row);
        var colIdx = $("td", row).index(this);
        var item = grid.dataItem(row);
        //console.log(item);
        var colName = $("#xzcsbmgrid").find('th').eq(colIdx).attr("data-field");//https://stackoverflow.com/questions/17343371/how-to-get-row-index-and-cell-index-of-row-click-kendo-grid/17363488#17363488
        alert(curRowIdx + '-' + colIdx + '-' + item.id + '-' + item.get("csmc") + colName);

        //grid.editCell(cell);
    });

双击行其实改为双击单元格更实用一些吧