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.
Comments
Post a Comment