Bind Grid to Property in DataSource

7 posts, 0 answers
  1. Darran
    Darran avatar
    2 posts
    Member since:
    Jan 2016

    Posted 14 Jan 2016 Link to this post

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

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2008 posts

    Posted 18 Jan 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Darran
    Darran avatar
    2 posts
    Member since:
    Jan 2016

    Posted 18 Jan 2016 in reply to Boyan Dimitrov Link to this post

    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? 

  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2008 posts

    Posted 19 Jan 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Dan Douglas
    Dan Douglas avatar
    2 posts
    Member since:
    Nov 2009

    Posted 23 Mar in reply to Boyan Dimitrov Link to this post

    The lack of implementation options for this scenario is very troubling for an enterprise toolset. 
  6. Dan Douglas
    Dan Douglas avatar
    2 posts
    Member since:
    Nov 2009

    Posted 23 Mar in reply to Dan Douglas Link to this post

    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..

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2008 posts

    Posted 26 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top