如何在KendoUI中获取选定行的值

Question

如何在KendoUI中获取选定行的值

47

我有一个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的值，但不确定如何做。

以下是我的JavaScript函数：

$("#editEntity").click(function () {

    var entityGrid = $("#EntitesGrid").data("kendoGrid");

    // what should I do from here
});

更新：添加代码以遍历所有行。

function loadPreviousEntityVersion() {

    alert("sdfsdfsdf");
    var entityGrid = $("#EntitesGrid").data("kendoGrid");
    var data = entityGrid.dataSource.data();

    for(var i = 0; i<data.length; i++) {
        var currentDataItem = data[i];
        alert(dataItem.EntityVersionId);

    }
}

- qinking126

还想指出的是，KendoUI的网格支持批量编辑/添加，因为看起来你可能正在手动实现相同的想法。http://demos.kendoui.com/web/grid/editing.html - johlrich

4个回答

11

有更好的方法。在我使用Kendo AngularJS指令的页面上，我正在使用它，并且网格没有ID...

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

- David Slavík

这个问题在于，如果您只是单击网格项，它就会触发事件，而实际上只有在真正发生更改时才应该触发。基本上与“编辑”功能相同。 - vsarunov

3

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

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

- sosha

1

如果您想选择特定的元素，请使用以下代码。

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

- Ashutosh B Bodake

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- johlrich · Accepted Answer

一种方法是使用网格的 select() 和 dataItem() 方法。

在单选情况下，select() 将返回一行数据，可以将其传递给dataItem() 方法。

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

对于多行选择，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
});