CODEWITHSUNDEEP
jqueryjsonkendo-uikendo-grid
James
James

Reputation: 3184

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

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?

Upvotes: 1

Views: 114

Answers (1)

Joe Glover
Joe Glover

Reputation: 1026

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
            }]
        });

Upvotes: 1

Related Questions