model view controller - Post kendo grid values -

model view controller - Post kendo grid values -

below kendo grid

@(html.kendo().grid<cs.web.models.people.groupdetailmodel>() .name("grid") .events(e => e.databound("lineitems_databound")) .htmlattributes(new { style = "overflow:hidden;", @class = "normalgrid" }) .columns(columns => { columns.bound(p => p.groupid).hidden(); columns.bound(p => p.groupname).title("group name").width(30); columns.bound(p => p.department).title("department name").width(30); columns.bound(p => p.isblindsettingsenable).title("blind group") .clienttemplate("<input type=\"checkbox\" #= isblindsettingsenable ? \"checked=checked\": \"\" # enabled=\"enabled\" />") .width(30); columns.bound("department").title("remove") .clienttemplate("<a href='javascript:void(0)' title='remove' onclick='return removeusergrouprelation(+#=groupid#+);'> <img alt='remove' src='" + @url.content("~/content/images/delete_icon.png") + "' /></a>") .width(30); }) .sortable() .scrollable(scrollable => scrollable.virtual(false)) .datasource(datasource => datasource .ajax() .read(read => read.action("getassignedgroups", "people") .data("setroutesvalues") ) //new { merchantid = viewbag.merchantid, startdate = model.startdate, enddate = model.enddate } ) .tablehtmlattributes(new { @class = "grid_1" }) )

below javascript code

var userid = '@viewbag.userid' $.ajax({ url: '@url.action("savegroupsuserdetails")', type: "post", datatype: "json", data: { models: kendo.stringify($("#grid").data("kendogrid").datasource.view()), userid: userid }, success: function (result) { } });

here in kendo grid there checkbox column.when check or uncheck checkbox @ client sied(in browser).and post via give javascript $.ajax post,it not post values of checkboxes have changed on client browser,it shows values binded server side.

so,my question want updated values post on server modified on client browser.

i shall thankfull if provide me answer.

i believe because looking @ actual value of datasource , not grid itself. grid non-editable. manually throwing inputs grid , these not effect datasource.

you can take 2 approaches kind of update.

you can leave grid way have set , handle update solely though java script. need dataitems need update manually jquery.

you can lookup of check boxes in grid check, relevant dataitem manually. here short illustration showing how dataitem row in grid.

//checkbox jquery object referencing 1 of checkboxes var row = $(checkbox).closest("tr"); var grid = $("#grid").data("kendogrid"); var info = grid.dataitem(row);

once have of dataitems relevant can post update. have reload grid updated status of these items.

overall not preferred way kind of update kendo grid.

i suggest sec method.

this site pulling examples from: http://demos.telerik.com/aspnet-mvc/grid/editing

first need create kendo grid editable .editable(editable => editable.mode(grideditmode.incell)). not need custom template adds checkbox anymore. automatically add together them when editing grid now.

you need set datasource have update function , have server expect update.

your datasource binding

.datasource(datasource => datasource .ajax() .batch(true) .read("editing_read", "grid") .update("editing_update", "grid") )

and server side code

[acceptverbs(httpverbs.post)] public actionresult editing_update([datasourcerequest] datasourcerequest request, [bind(prefix = "models")]ienumerable<productviewmodel> products) { if (products != null && modelstate.isvalid) { foreach (var product in products) { productservice.update(product); } } homecoming json(products.todatasourceresult(request, modelstate)); }

by returning json object grid auto update new values. preferred way edit grid.

model-view-controller kendo-ui grid