Kendo grid popup editor no longer opens after cancel is clicked

Question

I have a kendo grid with a custom popup editor. I have defined the edit body as a kendo template using mvvm binding, but I think I must be missing something because the behaviour of the popup is not as expected.

When clicking Edit, the popup editor appears, but if I close the popup using the cancel button, then click Edit on the same row again, the editor does not appear.

In addition, changes do not seem to be occurring as expected for the field using the dropdown measureStatusId, unless it is not null to begin with.

I would prefer to use mvvm here, I don't think this scenario is unusual enough to need to roll my own edit pop up?

See this JSBin.

var model = {
  "title": "Active Community",
  "measures": [
    {
      "measureId": 3,
      "completed": false,
      "measureStatusId": null,
      "measureStatus": null,
      "progress": null,
      "target": "Council provides a wide range of accessible and well-maintained sports facilities to increase levels of participation in sport and active recreation"
    },
    {
      "measureId": 4,
      "completed": false,
      "measureStatusId": null,
      "measureStatus": null,
      "progress": null,
      "target": "Council funds and works in partnership with external recreation organisations to help increase levels of participation in sport and active recreation"
    }
  ],
  "measureStatuses": [
    {
      "text": "Green",
      "value": "1",
      "selected": false
    },
    {
      "text": "Orange",
      "value": "2",
      "selected": false
    },
    {
      "text": "Red",
      "value": "6",
      "selected": false
    }
  ]
},
PNCC = {};

$(document).ready(function () {
  PNCC.viewModel = new kendo.observable(model);

  $("#Measures").kendoGrid({
    dataSource: {
      data: PNCC.viewModel.measures,
      schema: {
        model: {
          id: "measureId",
          fields: {
            measureId: { type: "number", editable: false },
            target: { type: "string", editable: false },
            completed: { type: "boolean" },
            measureStatusId: { type: "string" },
            measureStatus: { type: "string" },
            progress: { type: "string" }
          }
        }
      },
      sort: { field: "target", dir: "asc" }
    },
    "columns": [
      {
        "title": "Performance Measures & Targets",
        "field": "target"
      },
      {
        "title": "Year to date progress and next steps",
        "field": "progress"
      },
      {
        "title": "Status",
        "field": "measureStatus"
      },
      {
        "title": "Complete?",
        "field": "completed"
      },
      { command: ["edit"], title: " " }
    ],
    "filterable": false,
    "scrollable": true,
    editable: {
      mode: "popup",
      template: kendo.template($("#popup_editor").html())
    }
  });
});

Answer 1

Some changes:

• Make measureStatusId be a number in model and the grid schema.
• Change the grid status column from measureStatus to measureStatusId
• Alter the html declaration of the dropdown to include data-value-primitive="true"
• Change the observable to include measures as a datasource, and update the grid declaration to use that directly, rather than create a new datasource.

I think the critical change here was to make both the grid and the popup refer to a single object, rather than two separate objects. The rest of the issues seem to stem from mismatching datatype configuration.

The change to the observable object is shown below.

  PNCC.viewModel = new kendo.observable({
    measures: new kendo.data.DataSource({
      data: model.measures,
      schema: {
        model: {
          id: "measureId",
          fields: {
            measureId: { type: "number", editable: false },
            target: { type: "string", editable: false },
            measureStatusId: { type: "number" },
            progress: { type: "string" }
          }
        }
      },
      sort: { field: "target", dir: "asc" }
    }),
    measureStatuses: model.measureStatuses
  });