單擊取消后，將不再打開Kendo網格彈出編輯器

Question

我有一個帶有自定義彈出編輯器的kendo網格。 我已經使用mvvm綁定將編輯主體定義為kendo模板，但是我認為我一定會丟失某些東西，因為彈出窗口的行為與預期的不同。

單擊“編輯”時，將顯示彈出式編輯器，但是如果我使用“取消”按鈕關閉彈出式窗口，然后再次單擊同一行上的“編輯”，則不會出現該編輯器。

此外，使用dropdown measureStatusId似乎不會對字段進行預期的measureStatusId ，除非開頭不為null。

我更喜歡在這里使用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: " " }
    ],
    "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: " ", 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"
• 更改可觀察對象以將measures包括為數據源，並更新網格聲明以直接使用它，而不是創建新的數據源。

我認為這里的關鍵更改是使網格和彈出窗口都引用一個對象，而不是兩個單獨的對象。 其余問題似乎源於數據類型配置不匹配。

對可觀察對象的更改如下所示。

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