jquery - Kendo UI grid popup now working after AJAX data -

jquery - Kendo UI grid popup now working after AJAX data -

i have kendo grid has info populated via ajax.

if take out ajax fine when populate info via ajax edit button doesn't bring pop up.

the grid looks this:

<div id="definedlevelsgridcontainer"> @(html.kendo().grid(model.where(x => x.orglevel == 0).first().definedfieldslist) .name("definedlevelsgrid") .columns(columns => { columns.bound(x => x.fieldname).title("name"); columns.bound(x => x.fieldtypetext).title("type"); columns.bound(x => x.ismandatory).title("mandatory"); columns.bound(x => x.defaultvalue).title("default value"); columns.bound(x => x.updatedon).title("updated"); columns.command(command => { command.edit(); command.destroy(); }); }) .editable(editable => editable.mode(grideditmode.popup).templatename("_orgdefinedfieldedit")) .pageable() .sortable() .datasource(datasource => datasource .server() .model(model => model.id(x => x.fieldid)) .update(update => update.action("update", "home")) .destroy(destroy => destroy.action("destroy", "home")) ) )

as can see populating it, default, first item in list of data.

i have this:

$(window).load(function () { $(".levelselector:first").click(); });

which calls next function:

$(".levelselector").click(function () { var rootstring = $(this).html(); var splitstring = rootstring.split("-"); var levelguid = $(this).attr("levelguid").tostring(); $("#leveleditname").text($.trim(splitstring[0])); $("#leveleditinput").val($.trim(splitstring[1])); $("#createdon").text($(this).attr("createddate")) $("#createdby").text($(this).attr("createdby")) $("#updatedon").text($(this).attr("updateddate")) $("#selectedlevelguid").text(levelguid) var url = '@url.action("getlevelfields", "organisationajax")' + '?levelguid=' + levelguid; $.ajax({ url: url, contenttype: "application/json; charset=utf-8", type: 'post', context: this, timeout: 60000, datatype: 'json', trycount: 0, retrylimit: 3, success: function (data) { var grid = $("#definedlevelsgrid").data("kendogrid"); grid.datasource.data(data); }, error: function (httprequest, textstatus, errorthrown) { $(".message").text("error: " + textstatus + " " + errorthrown); } }); });

the first part populating part of page , ajax phone call go , data. on success populates grid.

that works.

but when click on edit doesn't load grid. move top of page know firing.

if stop pre population ajax load template know template isn't @ fault.

does have ideas?

many in advance.

in vcase else sees this, fixed changing .server .ajax.

so this:

@(html.kendo().grid(model.where(x => x.orglevel == 0).first().definedfieldslist) .name("definedlevelsgrid") .columns(columns => { columns.bound(x => x.fieldname).title("name"); columns.bound(x => x.fieldtypetext).title("type"); columns.bound(x => x.ismandatory).title("mandatory"); columns.bound(x => x.defaultvalue).title("default value"); columns.bound(x => x.updatedon).title("updated"); columns.command(command => { command.edit(); command.destroy(); }); }) .editable(editable => editable.mode(grideditmode.popup).templatename("_orgdefinedfieldedit")) .pageable() .sortable() .datasource(datasource => datasource .ajax() //<------- changed .ajax() .model(model => model.id(x => x.fieldid)) .update(update => update.action("update", "home")) .destroy(destroy => destroy.action("destroy", "home")) )

jquery ajax asp.net-mvc kendo-ui kendo-grid