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

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

0 голосов
/ 23 мая 2018

У меня есть сетка кендо с пользовательским всплывающим редактором.Я определил тело редактирования как шаблон кендо, используя привязку 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())
    }
  });
});

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

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

  • Сделать 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
  });
0 голосов
/ 23 мая 2018

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

Пожалуйста, отметьте это 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())
    }
  });
...