Kendo grid edit popup mvvm binding seems failed - kendo-ui

Question

Grid popup mvvm binding seems fail when I add a new row and to set value of model attribute in edit eventHandler(model.set("port","udp")) but the select input doesn't change value and from debugger console it shows that event.model's value of property keep unchanged.
But after i manually selecting the port,I try to model.set("port","tcp"),it works!
I am confused of the timing of the binding mechanism of the value field of input element and kendo model binding...
Html part as below:
<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 as below:
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();
}

Answer 1

Try supplying a defaultValue for the field in your model declaration:
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} },
}
}
},
});
I don't know why, but that seems to fix the problem. See dojo for working example.