jquery - Moving data from One kendoui grid to other, both the grids have different models -

presenly have requirement in have pas data between 2 kendoui grids. problem datamodel of 2 grids different.

my source grid has 2 columns destination grid had 2 columns source grid , additional columns.

below have tried: unable insert selected records source destination grid.

my source grid defination:

 <div id="searchadusergrid">         @(html.kendo().grid<viewmodeladusers>()               .name("kaduser")               .columns(columns =>                   {                       columns.template(@<text></text>)                                         .clienttemplate("<input type='checkbox' #= isselected ? checked='checked':'' # class='chkbx' />");                       columns.bound(p => p.userloginname);                       columns.bound(p => p.userdisplayname);                    })               .autobind(false)               .datasource(ds => ds                                .ajax()                                .read(read =>                                 {                                 read.action("getaduser", "manageusers");                                 read.data("additionaldata");                                 })                                .serveroperation(false)                )              .selectable(selectable => selectable.mode(gridselectionmode.multiple))         )          <a href="#" id="btnaddusers" class="k-button">add selected users</a>     </div> 

my destination grid definition

 <div id="availableuserrolesection">  @(html.kendo().grid<viewmodeluserroles>()               .name("kuserroles")               .columns(columns =>{                       columns.bound(p => p.userroleid).hidden(true);                       columns.bound(p => p.users.userloginname).title("staffid");                       columns.bound(p => p.users.userdisplayname).title("staffname");                       columns.bound(p => p.roles).clienttemplate("#: roles.rolename #").title("assigned role");                       columns.command(command => { command.edit(); command.destroy(); }).width(200);               })               .autobind(true)               .editable(editable =>{                       editable.mode(grideditmode.inline);                       editable.displaydeleteconfirmation("do want remove user role assigned?");               })               .toolbar(toolbar => toolbar.template("<a href='javascript: void(0)'  onclick='createrow()' title='assign'>assign user roles</a>"))               .selectable(selectable => selectable.mode(gridselectionmode.single))               .events(e => e.edit("onedit"))               .datasource(ds =>{                       ds.ajax()                         .pagesize(5)                         .events(events =>{                                       //events.error("onerror");                                events.requestend("onrequestend");                           })                         .model(model => {                                    model.id(p => p.userroleid);                                    model.field(p => p.users.userloginname).editable(false);                                    model.field(p => p.users.userdisplayname).editable(false);                                    model.field(p => p.roles).defaultvalue(                                                  viewdata["defaultroles"] fmsapps.models.viewmodelroles);                           })                          .read(read => read.action("getuserroles", "manageusers"))                          .update(update => update.action("updateuserroles", "manageusers"))                          .destroy(destroy => destroy.action("deleteuserroles", "manageusers"));                       })  ) 

here checking rows checked in source grid:

  $('#kaduser').on('click', '.chkbx', function () {          var checked = $(this).is(':checked');         var grid = $('#kaduser').data().kendogrid;         var dataitem = grid.dataitem($(this).closest('tr'));         dataitem.set('isselected', checked);     }) 

then on button click need move selected row source grid destination grid

    function movegridrows(sourcegridname, destinationgridname) {         var sourcegrid = $("#" + sourcegridname).data("kendogrid");         var destinationgrid = $("#" + destinationgridname).data("kendogrid");           var selectedrows = [];         var rowsforremove = [];         //get selected rows source grid         $("#" + sourcegridname + " tbody tr").each(function () {             var currentdataitem = sourcegrid.dataitem($(this));             //insert custom check if row selected here             if (currentdataitem.isselected) {                 selectedrows.push(currentdataitem);                 rowsforremove.push($(this));             }         })            //insert selected rows using datasource insert method         (var = 0; < selectedrows.length; i++) {             var currentrecord = selectedrows[i];             //set id 0             currentrecord.userroleid = 0;             //destinationgrid.datasource.insert(currentrecord);             destinationgrid.datasource.add(currentrecord) 

*it breaking @ above line**????

        }          //remove inserted rows         (var = 0; < rowsforremove.length; i++) {             sourcegrid.removerow(rowsforremove[i]);         }     }       $('#btnaddusers').click(function () {         debugger;         movegridrows("kaduser","kuserroles")     }); 

please , let me know if have else make work or anywhere going wrong.