How to use a property within the server's JSON response object (instead of full object) to populate a Kendo grid?

user_1706691 0
Viewed 37

I have the following kendo grid:

$("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        url: "customers",
                        type: "GET",
                        dataType: "json"
                    }
                },
                height: 550,
                columns: [{
                    field: "contactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "contactTitle",
                    title: "Contact Title"
                }, {
                    field: "companyName",
                    title: "Company Name"
                }, {
                    field: "country",
                    width: 150
                }]
            });

The JSON response from the server looks like:

{
   "date": "2020-02-02",
   "responseType": "customer contact",
   "customerContact": [{
        "contactName": "Bob Smith",
        "contactTitle": "Manager",
        "companyName": "Acme",
        "country": "Canada"
    },{ 
    //more customerContact data
   }]
}

The grid is trying to populate using this full JSON object. How can I tell it to use only the customerContact property within the object?

I also need to get the date and responseType from the response to populate an HTML element outside the grid using:

$("#title").append('<h3>' + response.reponseType + ' at ' + date + '</h3>');

How can I pull out the responseType and date to populate the title?

kendo-grid kendo-ui jquery json
1 Answers

Use the schema.data property to indicate that your data isn't at the response root. You can use the requestEnd event to access the response directly, and populate your title element. See the dataSource documentation for more info.

        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    url: "customers",
                    type: "GET",
                    dataType: "json"
                },
                schema: {
                    data: "customerContact"
                },
                requestEnd: function(e) {
                    if (e.type === "read" && e.response) {
                        $("#title").append('<h3>' + e.response.reponseType + ' at ' + e.response.date + '</h3>');
                    }
                }
            },
            height: 550,
            columns: [{
                field: "contactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "contactTitle",
                title: "Contact Title"
            }, {
                field: "companyName",
                title: "Company Name"
            }, {
                field: "country",
                width: 150
            }]
        });
user_42237410
Related