如何访问 Kendo UI Grid 中所选项目的模型

Question

我的 ASP.NET MVC 应用程序中有一个可选择的 kendoUI 网格。如何获取所选项目的强类型模型对象？我尝试了以下代码，但它不起作用。

@(Html.Kendo().Grid<Backup>(Model.Backups)
    .Name("MatchingBackupsGrid")
    .Columns(col =>
        {
            col.Bound(backup => backup.BackupUId).Title("UID");
            col.Bound(backup => backup.BackupFirstName).Title("First Name");
            col.Bound(backup => backup.BackupLastName).Title("Last Name");
        })
        .Scrollable()
        .Selectable(sel =>
        {
            sel.Mode(GridSelectionMode.Single);
            sel.Type(GridSelectionType.Row);
        })
         .DataSource(dataSource => dataSource
            .Server()
            .Read(read => read.Action("SearchForBackup", "Arr", new { lastName = Model.SearchTerm }))
            .Model(model => model.Id(backup => backup.BackupUId))
         )
    )

function SelectBackupButtonClickHandler() {

    var grid = $("#MatchingBackupsGrid").data("kendoGrid");

    var selectedBackup = grid.dataItem(grid.select());

    console.log(selectedBackup);
}

Answer 1

网格行选择响应 Kendo change 事件。

@(Html.Kendo().Grid<Backup>(Model.Backups)
    .Name("MatchingBackupsGrid")
    .Columns(col =>
        {
            col.Bound(backup => backup.BackupUId).Title("UID");
            col.Bound(backup => backup.BackupFirstName).Title("First Name");
            col.Bound(backup => backup.BackupLastName).Title("Last Name");
        })
        .Scrollable()
        .Selectable(sel =>
        {
            sel.Mode(GridSelectionMode.Single);
            sel.Type(GridSelectionType.Row);
        })
         .DataSource(dataSource => dataSource
            .Server()
            .Read(read => read.Action("SearchForBackup", "Arr", new { lastName = Model.SearchTerm }))
            .Model(model => model.Id(backup => backup.BackupUId))
         )
    )
<script>
function SelectBackupButtonClickHandler() {
    var selectedBackup = this.dataItem(this.select());
    console.log(selectedBackup);
}

$("#MatchingBackupsGrid").data("kendoGrid").bind("change", SelectBackupButtonClickHandler);
</script>

Answer 2

当您使用客户端代码时，您只能访问客户端数据；您无法使用grid.dataItem() 访问强类型模型。如果你想这样做，你需要将项目的 id 发送到服务器，例如使用 AJAX 请求，并在那里继续您的工作；所以你必须做这样的事情：

function SelectBackupButtonClickHandler() {
    var grid = $("#MatchingBackupsGrid").data("kendoGrid");
    var selectedBackup = grid.dataItem(grid.select());
    var id = selectedBackup.id;

    $.ajax({
       type: "POST",
       url: yourUrl, // post to your controller action that does what you want to do with the model
       dataType: "json",
       data: { id: id } 
    };
}

Answer 3

使用kendoHelpers可以获取选中项的dataItem

// Get the grid
var grid = $('#SampleGrid').data('kendoGrid');

// Call your desired function
var dataItem = kendoHelpers.grid.getSelectedDataItem(grid);

// Manipulate the results
if (dataItem != null){
    // dataItem.MyId = ...
}

另一种方法getSelectedDataItemByCurrentCell 不要求网格是可选择的并且适用于活动单元格。

该库还有许多其他帮助函数。

Answer 4

我不知道我之前在做什么，我的代码现在可以工作了。

我尝试了很多东西——我出于某种原因假设grid.select() 返回一个数组，所以我尝试应用索引器来获取数组的第一个元素，如下所示：

var selectedBackups = grid.select();

// strangely, the Visual Studio intellisense mislead 
// me here as it showed me the model properties on 
// indexing this array
selectedBackups[0].BackupFirstName;

我也尝试过像这样对数组进行转换：

var names = $.map(grid.select(), function(item)
{
    return item.BackupFirstName + ' ' + item.BackupLastName;
});

我尝试了很多想法，以至于我忘记检查我的原始代码确实实际上是否具有所选行的强类型模型。

所以，为了记录，问题中的代码是正确的，并在下面转载。要在单选模式 KendoUI 网格中获取所选项目，请执行以下操作：

var grid = $("#MatchingBackupsGrid").data("kendoGrid");

// this is a single object and not an array
// this is your strongly typed model object
var selectedBackup = grid.dataItem(grid.select());

console.log(selectedBackup);