javascript - Assigning selected rows as other grid datasource -

i working on setting scenario following:

1) user shown existing results on first grid

2) user can select multiple results , click 'edit' button extract selected items first grid

3)second grid populated rows user has selected first grid , allow them make edits content

4)pressing save update results , show first grid rows updated

so far using drips , drabs of various forum threads (here , here), have managed accomplish first 2 steps.

$("#editbutton").kendobutton({     click: function () {         // extract selected results grid , send along 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 expecting see regards selected item(s) - attached dataitem.png. can see gridconfig populating blank rows (gridblankrows.png).

gridconfig setup:

$(document).ready(function () {      // build custom column schema based on number of lots - can vary      var columnschema = [];     columnschema.push({ title: 'date time'});     for(var = 0; < $("#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 datasource 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 identify doing wrong / outstanding here. help/guidance appreciated.

furthermore, need functionality 'add new' results. if possible use same grid (with blank datasource) in order accomplish this. user can add rows second grid , save similar functionality update functionality. if there way factor response, appreciate it.

the following example...

http://dojo.telerik.com/ekivo

...is modified version of...

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

a couple of notes:

• it matters if adding plain objects second grid's datasource (gridconfig.datasource.add(dataitem).tojson();), or kendo ui model objects (gridconfig.datasource.add(dataitem);). in first case, need pass updated values grid2 grid1, otherwise occur automatically;
• there no need refresh() second grid after adding, removing or changing data items
• both grid datasources must configured crud operations, can follow crud documentation
• the grid not persist selection across rebinds, if want preserve selection in first grid after values have been changed, use approach described @ persist row selection