PopUp Grid Kendo Editor Won't Close

Question

I have a basic grid with editable: "popup"

I have a command column labeled "edit". I use a remote data source with reading, updating, creating and deleting. The grid works, and when I click Edit , a pop-up window appears with all my fields in it. If I enter some changes in the fields and click Refresh , the data will be sent (I can see the ajax message), but the popup does not close.

My Refresh button has these classes "k-button k-button-icontext k-grid-update". In my popup these classes are "k-widget k-window".

The Cancel button closes the window, and the X in the upper right corner also closes the window.

Any ideas?

My data source code:

var dataSource = new kendo.data.DataSource({ transport: { read: { url: "myReadURL", dataType: "json" }, update: { url: "myUpdateURL", dataType: "json" }, create: { url: "myCreateURL", dataType: "json" }, destroy: { url: "myDestroyURL", dataType: "json" } }, schema: { data: "data", total: function(response){return $(response.data).length;}, model: { id: "id", fields: { id: { type: "number", editable: false }, location: { type: "string" }, username: { type: "string" }, host: { type: "string" }, model: { type: "string" }, newhost: { type: "string" }, newserial: { type: "string" }, newassettag: { type: "string" }, complete: { type: "boolean" } } } }, pageSize: 10 }); 

My grid initialization code:

 $("#grid").kendoGrid({ dataSource: dataSource, height: 430, filterable: true, sortable: true, resizable: true, scrollable: true, pageable: { refresh: true, pageSizes: [10,20,100] }, columns: [{ hidden: true, field:"id" },{ command: "edit", title: "&nbsp;", width: 90 },{ field: "location", title: "Location", width: 120, filterable: {ui: cityFilter} },{ field: "username", title: "Username", width: 120 },{ field: "host", title: "Host", width: 180 },{ field: "model", title: "Model", width: 180 },{ field: "newhost", title: "New Host", width: 180 },{ field: "newserial", title: "New Serial", width: 180 },{ field: "newassettag", title: "New Asset", width: 180 },{ field: "complete", title: "Complete", template: "<input type='checkbox' # if(complete){ # checked #} #/>", width: 70 } ], editable: "popup" }); 

My html:

 <div id="example" class="k-content"> <div id="grid" style="height: 380px"></div> </div> 

Answer 1

Your service should return a valid JSON document, even if it is empty. If your service does not respond or returns something that is not parsed as JSON, it does not close the popup.

For example: create a file called myUpdateURL that simply contains:

 {} 

and it should work.