Kendo 单击取消后不再打开网格弹出编辑器

Question

我有一个带有自定义弹出编辑器的 kendo 网格。我已经使用 mvvm 绑定将编辑主体定义为 kendo 模板，但我认为我一定遗漏了一些东西，因为弹出窗口的行为与预期不符。

单击“编辑”时，会出现弹出式编辑器，但如果我使用取消按钮关闭弹出式窗口，然后再次在同一行上单击“编辑”，则不会出现编辑器。

此外，使用下拉菜单 measureStatusId 的字段似乎没有按预期进行更改，除非它不是空的。

我更愿意在这里使用 mvvm，我不认为这种情况不寻常到需要滚动我自己的编辑弹出窗口？

看到这个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: "&nbsp;" }
    ],
    "filterable": false,
    "scrollable": true,
    editable: {
      mode: "popup",
      template: kendo.template($("#popup_editor").html())
    }
  });
});

Answer 1

我认为问题出在您为数据源创建的可观察对象上

请检查这个Jsbin

  PNCC.viewModel = new kendo.observable(model);

  $("#Measures").kendoGrid({
    dataSource: {
      data: model.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",
        width: "150px"
      },
      {
        "title": "Year to date progress and next steps",
        "field": "progress",
        width: "150px"
      },
      {
        "title": "Status",
        "field": "measureStatus",
        width: "150px"
      },
      {
        "title": "Complete?",
        "field": "completed",
        width: "150px"
      },
      { command: ["edit"], title: "&nbsp;", width: "75px" }
    ],
    filterable: false,
    scrollable: true,
    editable: {
      mode: "popup",
      template: kendo.template($("#popup_editor").html())
    }
  });

Answer 2

一些变化：

使 measureStatusId 成为 model 和网格架构中的数字。
将网格 status 列从 measureStatus 更改为 measureStatusId
更改下拉列表的 html 声明以包含 data-value-primitive="true"
更改 observable 以包含 measures 作为数据源，并更新网格声明以直接使用它，而不是创建新的数据源。

我认为这里的关键变化是让网格和弹出窗口都引用一个对象，而不是两个单独的对象。其余问题似乎源于不匹配的数据类型配置。

observable对象的变化如下所示。

  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
  });

Kendo 单击取消后不再打开网格弹出编辑器

Kendo grid popup editor no longer opens after cancel is clicked

javascript

kendo-ui

kendo-ui-grid