Всплывающий редактор сетки кендо больше не открывается после нажатия кнопки «Отмена».

У меня есть сетка кендо с пользовательским редактором всплывающих окон. Я определил тело редактирования как шаблон кендо, используя привязку mvvm, но я думаю, что должен что-то упустить, потому что поведение всплывающего окна не соответствует ожидаемому.

При нажатии «Изменить» появляется всплывающий редактор, но если я закрою всплывающее окно с помощью кнопки «Отмена», а затем снова нажму «Изменить» в той же строке, редактор не появится.

Кроме того, кажется, что изменения не происходят должным образом для поля, использующего раскрывающийся список 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: " " }
    ],
    "filterable": false,
    "scrollable": true,
    editable: {
      mode: "popup",
      template: kendo.template($("#popup_editor").html())
    }
  });
});

javascript kendo-ui kendo-ui-grid
person meataxe    schedule 23.05.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, что проблема связана с наблюдаемым объектом, который вы создали для своего источника данных.

Пожалуйста, проверьте этот 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())
    }
  });
person Celimpilo Mncwango    schedule 23.05.2018
comment
В вашем примере, хотя всплывающее окно теперь всегда отображается, как и ожидалось, в раскрывающемся списке нет данных. - person meataxe; 23.05.2018

arrow_upward
0
arrow_downward

Некоторые изменения:

  • Сделайте 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
  });
person meataxe    schedule 23.05.2018