Assigning selected rows as other grid datasource

Question

I am working on setting up a scenario as following:

1) User is shown existing results on first grid

2) User can select multiple results and click an 'Edit' button which will extract the selected items from the first grid

3)Second grid will be populated with the rows the user has selected from the first grid and will allow them to make edits to the content

4)Pressing save will update the results and show the first grid with the rows updated

So far using drips and drabs of various forum threads (here and here), I have managed to accomplish the first two steps.

$("#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 returns what i am expecting to see with regards to the selected item(s) - attached dataItem.png. I can see the gridConfig populating but with blank rows (gridBlankRows.png).

gridConfig setup:

$(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
    });
});

I have run out of useful reference material to identify what I am doing wrong / what could be outstanding here. Any help/guidance would be greatly appreciated.

Furthermore, I will also need functionality to 'Add New' results. If possible I would like to use the same grid (with a blank datasource) in order to accomplish this. The user can then add rows to the second grid and save with similar functionality to the update functionality. So if there is any way to factor this into the response, I would appreciate it.

Answer 1

The following example...

http://dojo.telerik.com/EkiVO

...is a modified version of...

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

A couple of notes:

• it matters if you are adding plain objects to the second Grid's dataSource (gridConfig.dataSource.add(dataItem).toJSON();), or Kendo UI Model objects (gridConfig.dataSource.add(dataItem);). In the first case, you will need to pass back the updated values from Grid2 to Grid1, otherwise this will occur automatically;
• there is no need to refresh() the second Grid after adding, removing or changing its data items
• both Grid dataSources must be configured for CRUD operations, you can follow the CRUD documentation
• the Grid does not persist its selection across rebinds, so if you want to preserve the selection in the first Grid after some values have been changed, use the approach described at Persist Row Selection