Привязка всплывающего окна редактирования таблицы кендо кажется неудачной - PullRequest
Новая
       32

Привязка всплывающего окна редактирования таблицы кендо кажется неудачной

0 голосов
/ 29 марта 2019

Привязка всплывающего окна mvvm к сетке кажется неудачной, когда я добавляю новую строку и устанавливаю значение атрибута модели в редактировании eventHandler (model.set ("port", "udp")), но вход выбора не меняет значение и с Консоль отладчика показывает, что значение свойства event.model остается неизменным.

Но после того, как я вручную выбрал порт, я пытаюсь моделировать .set ("порт", "tcp"), он работает!

Я запутался в синхронизации механизма привязки поля значения элемента ввода и привязки модели кендо ...

HTML часть, как показано ниже: 

<div class="k-block k-shadow">
<table style="width:100%;">
<tr><td><button class="btn-add" id="ButtonNew" type="button" onclick="addSetting()">New</button></td></tr></table>
</div>
<div class="k-block k-shadow">
  <div id="logForwardingGrid"></div>
</div>

JavaScript, как показано ниже: 

var dataSource = new kendo.data.DataSource({
  data:{"items":[{"seq":8,"ip":"10.0.0.99","port":36,"protocol":"udp","enable":false}]},
  schema: {
    data: "items",
    model: {
      id: "seq",
      fields: {
        seq: { type: "int", editable: false, validation: { required: false} },
        port: { type: "int",editable: true, validation: { required: true} },
        protocol: { type: "string",editable: true, validation: { required: true} },
        enable: { type: "boolean", validation: { required: true} },
      }
    }
  },
});
$("#logForwardingGrid").kendoGrid({
  dataSource: dataSource,
  columns: [{
    field: "seq",
    hiddenEdit: true,
    hidden: true
  }, {
    field: "ip",
    title: "IP",
  }, {
    field: "port",
    title: "Port",
  }, {
    field: "protocol",
    title: "Protocol",
    editor: protocalEditor
  }],
  editable: {
    mode:"popup",
  },
  edit: function(e) {
    if (e.model.isNew()) {
        //fail !! e.model's value of property("protocol") keep unchanged
       e.model.set("protocol","udp")
       console.log(e.model)
    }  
  }
});
    function protocalEditor(container,options){
  var data = [{ text: "udp", value: "udp" },{ text: "tcp", value: "tcp" }]
  $('<input id="protocol" name="protocol" required  data-bind="value:'+ options.field +'"/>')
        .appendTo(container).kendoDropDownList({
        dataSource:data,
        dataTextField: "text",
        dataValueField: "value",
  });

}

function addSetting(){
  $("#logForwardingGrid").data("kendoGrid").addRow();
}

1 Ответ

0 голосов
/ 29 марта 2019

Попробуйте указать defaultValue для поля в объявлении модели: 

var dataSource = new kendo.data.DataSource({
  data:{"items": [{"seq":8,"ip":"10.0.0.99","port":36,"protocol":"udp","enable":false}]},
  schema: {
    data: "items",
    model: {
      id: "seq",
      fields: {
        seq: { type: "int", editable: false, validation: { required: false} },
        port: { type: "int",editable: true, validation: { required: true} },
        protocol: { type: "string",editable: true, validation: { required: true}, defaultValue: "tcp" },
        enable: { type: "boolean", validation: { required: true} },
      }
    }
  },
});

Я не знаю почему, но, похоже, это решает проблему.См. dojo для рабочего примера.

...