将选定的行分配为其他网格数据源答案

【问题标题】：Assigning selected rows as other grid datasource将选定的行分配为其他网格数据源
【发布时间】：2016-12-06 17:05:09
【问题描述】：

我正在设置如下场景：

1) 用户在第一个网格上显示现有结果

2) 用户可以选择多个结果并单击“编辑”按钮，该按钮将从第一个网格中提取所选项目

3)第二个网格将填充用户从第一个网格中选择的行，并允许他们对内容进行编辑

4）按保存将更新结果并显示更新行的第一个网格

到目前为止，使用各种论坛主题（here 和here）的点滴和单调，我已经成功地完成了前两个步骤。

$("#editButton").kendoButton({
    click: function () {
        // extract selected results from the grid and send along with transition
        var gridResults = $("#resultGrid").data("kendoGrid"); // sourceGrid
        var gridConfig = $("#resultConfigGrid").data("kendoGrid"); // destinationGrid
        gridResults.select().each(function () {
            var dataItem = gridResults.dataItem($(this));
            gridConfig.dataSource.add(dataItem);
        });
        gridConfig.refresh();
        transitionToConfigGrid();
    }
});

dataItem 返回我期望看到的关于所选项目的内容 - 附加的 dataItem.png。我可以看到 gridConfig 填充但有空白行 (gridBlankRows.png)。

gridConfig 设置：

$(document).ready(function () {

    // build the custom column schema based on the number of lots - this can vary 
    var columnSchema = [];
    columnSchema.push({ title: 'Date Time'});
    for(var i = 0; i < $("#maxNumLots").data("value"); ++i)
    {
        columnSchema.push({ 
            title: 'Lot ' + i,
            columns: [{
                title: 'Count'
            }, {
                title: 'Mean'
            }, {
                title: 'SD'
            }]
        });
    }
    columnSchema.push({ title: 'Comment'});
    columnSchema.push({ title: 'Review Comment' });

    // build the datasource with CU operations
    var configDataSource = new kendo.data.DataSource({
        transport: {
            create: function(options) {},
            update: function(options) {}
        }
    });

    $("#resultConfigGrid").kendoGrid({        
        columns: columnSchema,
        editable: true
    });
});

我已经用完了有用的参考资料来确定我做错了什么/这里可能有什么突出之处。任何帮助/指导将不胜感激。

此外，我还需要“添加新”结果的功能。如果可能的话，我想使用相同的网格（带有空白datasource）来完成此操作。然后，用户可以将行添加到第二个网格并使用与更新功能类似的功能进行保存。因此，如果有任何方法可以将其纳入响应中，我将不胜感激。

【问题讨论】：

标签： javascript kendo-ui kendo-grid kendo-datasource

【解决方案1】：

下面的例子...

http://dojo.telerik.com/EkiVO

...是...的修改版本

http://docs.telerik.com/kendo-ui/framework/datasource/crud#examples

几点说明：

是否将plain objects 添加到第二个网格的数据源 (gridConfig.dataSource.add(dataItem).toJSON();) 或 Kendo UI 模型对象 (gridConfig.dataSource.add(dataItem);) 很重要。在第一种情况下，您需要将更新后的值从 Grid2 传递回 Grid1，否则会自动发生；
添加、删除或更改其数据项后无需refresh()第二个Grid
必须为 CRUD 操作配置两个 Grid 数据源，您可以按照CRUD documentation
Grid 不会在重新绑定后保留其选择，因此如果您希望在更改某些值后保留第一个 Grid 中的选择，请使用Persist Row Selection 中描述的方法

【讨论】：