Bind Grid to Property in DataSource

[Darran]

Hi,

We are currently evaluating the Kendo UI javascript Grid. We`d like  to bind it to a datasource populated from a remote rest service. The json returned will be similar to the json at the bottom of this post. We would like the grid to bind to the stock array but not the summary but would like the summary accessible from the datasource.

I`ve tried calling the rest service from jquery then populating the datasource using the array but this seems slower then binding the datasource to the rest service directly.

Below is an example of what we`d like to do

Many thanks

Darran

var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/warehouse/report",
                    dataType: "json"
                }
            },
            schema: {
                data: "breaks",
                total: function(response) {
                    return $(response.breaks).length;
                }
            },
            groupable: true,
            sortable: true,
            pageSize: 100,
            page:1
        });


$(gridId).kendoGrid({
            dataSource: dataSource.breaks, //How do we bind to the breaks only???
            selectable: "multiple cell",
            allowCopy: true,
            columns: columnDefinitions(),
            columnMenu: true,
            filterable: true,
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            groupable: true
        });

Example Json:

{summary{colour:red,size:10},
  stock:[{name:"name1",type:"type1"},
         {name:"name2",type:"type2"},
         {name:"name3",type:"type3"}
]}

[Boyan Dimitrov]

Hello Darran,

 

When the schema.data is defined the Kendo UI DataSource is populated with the data stored in this field of the response. For example the DataSource will be populated with the data stored in the "breaks" field of the response (considering the provided response I do not see such field). Any other information (apart from the array stored in the "breaks") will be lost. 

 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Darran]

Hi Boyan,

Sorry breaks should of read as stock. What I`m trying to do is create a datasource 

 

var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/warehouse/report",
                    dataType: "json"
                }
            }});

where by both the stock and summary fields are accessible as the summary is needed to be bound to elsewhere but only bind to the Stock array in the grid.

 

$(gridId).kendoGrid({
            dataSource: dataSource.stock, //How do we bind to the stock only???
            selectable: "multiple cell",
            allowCopy: true,
            columns: columnDefinitions(),
            columnMenu: true,
            filterable: true,
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            groupable: true
        });

So is it possible for a datasource to contain both summary and stock fields but only bind to the stock field in the grid? 

[Boyan Dimitrov]

Hello Darran,

 

No, I am afraid that such scenario is not possible to be achieved with single instance of the Kendo UI DataSource. A single instance of the Kendo UI DataSource should be populated either with summary object or with the stocks array. 

 

As far as I understand the main idea is to request both (summary object and stock array) with a single request and use them both in your application. A possible solution for your case is to define your Kendo UI DataSource as shown in the Local or Custom Transport CRUD Operations article. 

 

The transport.read to be defined as function. In the body of the function is to execute an ajax request and retrieve both summary and stock data. In this case you can simply call the e.success method of the transport.read and pass only the stock array (extract from the response of ajax request). The summary object can be stored in local variable or something else. 

 

This way with a single request to the server you can retrieve all data and populate the Kendo UI DataSource with the stock array. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Dan Douglas]

The lack of implementation options for this scenario is very troubling for an enterprise toolset. 

[Dan Douglas]

Here is sample code to get it to work for anyone who needs it:

articlesds = new kendo.data.DataSource({
            transport: {
                read: function (e) {
                    var xhttp = new XMLHttpRequest();
                    xhttp.open("GET", uri, false);
                    xhttp.setRequestHeader("Content-type", "application/json");
                    xhttp.send();
                    var response = JSON.parse(xhttp.responseText);
                    // on success
                    other = response.otherData; //put other data in local variables for further use
                    e.success(response.articles);
                    // on failure
                    //e.error("XHR response", "status code", "error message");
                }
            }

Unfortunately, there was no other friendly way to accomplish this with KendoUI Data Source, but it does work..

[Boyan Dimitrov]

Hello,

Generally speaking it is possible the actual merge of the data to be handled on the server side. For example let's assume that we have two different end points on the server to return specific data - one for summary data and one for stock data. In this case it is possible to include third endpoint that will internally call each end point in order to merge that data in one single response. 

This gives the advantage of having a single request to the server from the client-side (calling each individual endpoint and the actual merging will be handled on the server). 

Regards,
Boyan Dimitrov
Progress Telerik