Problems with Kendo UI Grid Editing - kendo-ui

Question

I tried use the Kendo Grid and i found some problems.
The button action "edit" and "remove " do nothing when i click, but if i put the "create" command into the transport, the grid send lots of POSTS for the create URL command when i click in delete or click in edit > cancel (the update button do nothing too).
What I doing wrong?
My code:
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<input type="number" min="0" id="item-id" maxlength="10" />
<input type="text" id="name" class="k-textbox" placeholder="..." />
<button style="width: 100px" id="btn-grid-filtrar" class="k-button" >Filter</button>
</div>
</script>
<script>
$(document).ready(function() {
var dataSource = new kendo.data.DataSource(
{
schema:
{
data: "data",
total: "total",
model:
{
id: "data",
fields:
{
id: { editable: false, nullable: false },
nome: { type: "string", validation: { required: true} },
ativo: { type: "boolean" }
}
}
},
transport:
{
read:
{
url: "page",
dataType: "json",
type: "POST",
data: additionalData
},
update: {
url: "update",
dataType: "jsonp"
},
destroy: {
url: "delete",
dataType: "jsonp"
}
/*,
create: {
url: "add",
dataType: "jsonp"
}
*/
},
pageSize: 5,
serverSorting: true,
serverPaging: true,
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
pageable: {
input: true,
numeric: false
},
batch: true,
columns: [
{ field: "id", title: "#", width: "60px" },
{ field: "nome", title: "Nome" },
{ field: "ativo", title: "Ativo", width: "60px", template: "#= ativo ? 'Sim' : 'Não' #" },
{ command: ["edit", "destroy"], title: "Ações", width: "200px" }
],
editable: "inline",
toolbar: kendo.template($("#template").html()),
});
kendo.bind($(".toolbar"));
$("#id").kendoNumericTextBox({
format: "##########",
placeholder: "..."
});
$("#btn-grid-filtrar").click(function() {
grid.data("kendoGrid").dataSource.read();
});
});
function additionalData() {
return {
filtro_id: $("#item-id").val(),
filtro_nome: $("#name").val()
};
}
</script>

Answer 1

First of all, I'm assuming that you server is serving a JSON with the following format:
{
"total": 2,
"data" : [
{
"data" : 23,
"id" : 1,
"ativo": true,
"nome" : "stock-1"
},
{
"data" : 34,
"id" : 2,
"ativo": false,
"nome" : "stock-2"
}
]
}
Correct?
So the first thing is changing the "data" on each row data to something not called data. It turns out that data is a kind-of reserved word in KendoUI commonly used in code structures as:
with (data) {
// Expanded code coming from a grid row data
}
Where this data is a variable referencing a row in your grid. So, in this context data is both the row itself and and a field in that row and then JavaScript cannot correctly solve it.
So you can define your schema as:
schema : {
data : "data",
total: "total",
model: {
id : "_data",
fields: {
id : { editable: false, nullable: false },
nome : { type: "string", validation: { required: true} },
ativo: { type: "boolean" }
}
}
},
NOTE: I've replace data by _data.
Transmitted data is:
{
"total": 2,
"data" : [
{
"_data" : 23,
"id" : 1,
"ativo": true,
"nome" : "stock-1"
},
{
"_data" : 34,
"id" : 2,
"ativo": false,
"nome" : "stock-2"
}
]
}
Just with this small change your Edit button will start working.

Answer 2

You are not supposed to define transport level for local datasources, if understand correctly your code, you are not posting anywhere - you are not binding any remote data, I can't see any url ? Follow this example http://demos.kendoui.com/web/datasource/index.html.