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

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

4 个答案: