I can't figure out what the JSON response from my server should be given this setup for a Kendo-UI Grid Control & Datasource while maintaining the validations of my model.
Here is my code below for the Grid.
<div id="grid"></div>
<script>
var crudServiceBaseUrl = "/api",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/companies",
dataType: "json",
type: "POST"
},
update: {
url: crudServiceBaseUrl + "/companies/update",
dataType: "json",
type: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/companies/destroy",
dataType: "json",
type: "POST"
},
create: {
url: crudServiceBaseUrl + "/companies/create",
dataType: "json",
type: "POST"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
error: function (e) {
/* the e event argument will represent the following object:
{
errorThrown: "Unauthorized",
sender: {... the Kendo UI DataSource instance ...}
status: "error"
xhr: {... the Ajax request object ...}
}
*/
//alert("Status: " + e.status + "; Error message: " + e.errorThrown);
console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
},
autoSync: true,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 20,
selectable: "multiple cell",
allowCopy: true,
columnResizeHandleWidth: 6,
schema: {
total: "itemCount",
//data: "items",
model: {
id: "CompanyID",
fields: {
CompanyID: { editable: false, nullable: true },
Name: { validation: { required: true } },
Phone: { type: "string" },
Email: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 550,
groupable: true,
sortable: {
mode: "multiple",
allowUnsort: true
},
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
reorderable: true,
resizable: true,
columnMenu: true,
filterable: true,
columns: [
{ field: "name", title: "Company Name" },
{ field: "phone", title:"Phone" },
{ field: "email", title:"Email" },
{ command: ["edit", "destroy"], title: "Operations", width: "240px" }
],
editable: "popup"
});
</script>
<div id="grid"></div>
<script>
var crudServiceBaseUrl = "/api",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/companies",
dataType: "json",
type: "POST"
},
update: {
url: crudServiceBaseUrl + "/companies/update",
dataType: "json",
type: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/companies/destroy",
dataType: "json",
type: "POST"
},
create: {
url: crudServiceBaseUrl + "/companies/create",
dataType: "json",
type: "POST"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
error: function (e) {
/* the e event argument will represent the following object:
{
errorThrown: "Unauthorized",
sender: {... the Kendo UI DataSource instance ...}
status: "error"
xhr: {... the Ajax request object ...}
}
*/
//alert("Status: " + e.status + "; Error message: " + e.errorThrown);
console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
},
autoSync: true,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 20,
selectable: "multiple cell",
allowCopy: true,
columnResizeHandleWidth: 6,
schema: {
total: "itemCount",
//data: "items",
model: {
id: "CompanyID",
fields: {
CompanyID: { editable: false, nullable: true },
Name: { validation: { required: true } },
Phone: { type: "string" },
Email: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 550,
groupable: true,
sortable: {
mode: "multiple",
allowUnsort: true
},
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
reorderable: true,
resizable: true,
columnMenu: true,
filterable: true,
columns: [
{ field: "name", title: "Company Name" },
{ field: "phone", title:"Phone" },
{ field: "email", title:"Email" },
{ command: ["edit", "destroy"], title: "Operations", width: "240px" }
],
editable: "popup"
});
</script>
You will notice in the code that I commented out //data: "items"
in the schema if I uncomment it then the Kendo-UI Grid fills with data...however, I think I'm doing it incorrectly because then the validation rules don't seem to work on the data.
For example I can tell because I'm using the 'pop up' type editing on my grid and I don't see the required working, and if I change one of the model types to boolean or number I don't see a checkbox appear or the number selector.
How should my JSON format look for a schema like the one provided?
My current JSON response looks like this. I have itemCount in there because I'm doing serverPaging, serverFiltering and serverSorting.
{"itemCount":"7","items":[{"name":"Joe","phone":"(714)333-8650","email":"fake@gmail.com"},{"name":"Rachel","phone":"(562)810-4382","email":"rachel@yahoo.com"},{"name":"John","phone":"(562)810-4382","email":"John@yahoo.com"},{"name":"Richard","phone":"(562)810-4382","email":"Richard@yahoo.com"},{"name":"Sister","phone":"(562)810-4382","email":"Sister@yahoo.com"},{"name":"Brother","phone":"(562)810-4382","email":"Brother@yahoo.com"},{"name":"Sibling","phone":"(562)810-4382","email":"Sibling@yahoo.com"}]}