I'm using kendoUi in order to connect via REST API with my backend server. The current goal is to make bool fields available to change right in the grid. I do it in the following way.
function onLoad() {
var Task = kendo.data.Model.define({
id : "id",
fields : {
"id" : { type: "number"},
"date" : { type: "date"},
"done" : { type: "boolean"},
"class" : { type: "string"},
"title" : { type : "string" }
}
});
var dataSource = new kendo.data.DataSource({
type: "jsonp",
// autoSync: true,
transport: {
read: "http://localhost:9090/todo-backend/tasks",
update: {
type: "PUT",
contentType: "application/json"
},
parameterMap: function(data, operation) {
if (operation === "update") {
return JSON.stringify(data);
}
return data;
}
},
schema: {
model: Task
}
});
var selectedTask;
$("#grid").kendoGrid({
dataSource: dataSource,
selectable: true,
columns: [{ field: "done", title: "Done" , template: "<input type='checkbox' class='cb_done' data-bind='checked:done', #= done ? checked='checked' : '' #/>" },
{ field: "title", title: "Task"}],
change: function() {
var title;
this.select().each(function() {
var dataRow = grid.dataItem($(this));
title = dataRow.title;
selectedTask = dataRow;
})
this.dataSource.transport.options.update.url= "http://localhost:9090/todo- backend/tasks/" + selectedTask.id;
$("#change-title").val(title);
}
});
var grid = $("#grid").data("kendoGrid");
grid.tbody.on("change", ".cb_done", function (e) {
var row = $(e.target).closest("tr");
var item = grid.dataItem(row);
item.set("done", $(e.target).is(":checked"));
dataSource.sync();
});
$("#change-task").click(function() {
var val = $("#change-title").val();
selectedTask.set("title", val);
dataSource.sync();
dataSource.read();
})
}
window.onload=onLoad;
To implement this approach I read: checkbox binding, dataSource.columns, kendo.data.Model and this,this,this
When i'm trying to sync dataSource() my checkboxes(cb) reset to invalid state. And only after refreshing the page, I can see actual state of tasks. It seems like cb uses initial value on declaration stage of dataSource.columns.
Thanks in advance!
