Kendo Grid PopUp Editor Will Not Close

Question

I have a basic grid with editable: "popup"

I have a command column with "edit" in it. I am using a remote data source with read, update, create and destroy defined. The grid works, and when I click Edit, the popup window appears with all my fields in it. If I enter some changes in the fields and click Update, the data gets submitted (I can see the ajax post) but the popup window does not close.

My Update button has these classes "k-button k-button-icontext k-grid-update". My popup window has these classes "k-widget k-window".

The Cancel button closes the window and the X in upper right closes the window too.

Any ideas?

My datasource 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 init 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: " ",
                  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 needs to return a valid JSON document, even if it is empty. If your service does not respond anything or returns something not parseable as JSON, then it will not close the popup.

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

{}

and it should work.