What should my JSON response look like for this Kendo-UI Datasource & Kendo-UI Grid

Question

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"}]}

Answer 1

Okay, looks like I was just blind, turns out its case sensitive... the validation started working once I changed my schema to the following. name, phone and email in the json are lowercase so the lesson here is keep it lowercase in the schema definition also if your json response is that way.

schema: {
            total: "itemCount",
            data: "items",
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    name: { validation: { required: true } },
                    phone: { type: "string" },
                    email: { type: "string" }
                }
            }
        }