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: "&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>

Do you mind editing your post and include the code for initializing the grid and the datasource? — OnaBai
Updated post to include datasource and grid init code. I do have an id defined in the schema. I am using Kendo UI v2013.1.319 and jQuery 1.9.1. I have also tried using a template for the popup. It works in all respects except for closing too. — miked

OnaBai OnaBai · Accepted Answer · 2013-07-08T23:58:00

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.

Kendo Grid PopUp Editor Will Not Close

1 Answers