Data Source with complex object

2 posts, 0 answers
  1. Albert
    Albert avatar
    6 posts
    Member since:
    May 2012

    Posted 19 Sep 2013 Link to this post

    I followed the tutorial, part 2 hello services. I wanted to extend the example and use it in a real world app that I am putting together. But I am having a issue. Here is my json data returned from my service:

    [{"CustomerId":"60506","CustomerName":"WILLIAMS COMFORT AIR          ","PartNumber":"34.120.           ","Vnd":"PV","SellPrice":"       1.45","UM":"EA ","Branches":[{"Id":2,"AvailQty":0,"Status":"A","Location":"St. Louis"},{"Id":3,"AvailQty":100,"Status":"A","Location":"Paducah"},{"Id":4,"AvailQty":138,"Status":"A","Location":"Ft. Wayne"},{"Id":5,"AvailQty":685,"Status":"A","Location":"Indianapolis"},{"Id":6,"AvailQty":185,"Status":"A","Location":"Louisville"},{"Id":7,"AvailQty":132,"Status":"A","Location":"Lexington"},{"Id":8,"AvailQty":2,"Status":"A","Location":"Evansville"}]}]
    Here is my js:
    <script>
        var dataSource = null;
     
        $(function () {
     
        });
     
        function Lookup() {
            var customer = $("#customer").val();
             
            if (customer == "") {
                customer = "60506";
            }
     
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "api/part/",
                        data: {
                            partnumber: $("#part").val(),
                            customer: customer
                        }
                    }
                }
            });
             
            dataSource.read();
     
            $("#partsGrid").kendoGrid({
                groupable: true,
                sortable: true,
                dataSource: {
                    data: dataSource.data()[0].Branches,
                    schema: "Branches"/*{
                        model: mySchema
                    }*/
                }/*,
                columns: [{
                    field: "CustomerId",
                    title: "Id"
                }, {
                    field : "CustomerName",
                    title : "Name"
                }]*/
            });
        }
    </script>
    I want the datasource in an external var so I can ref other bit of information in it. In the end, I want a page with the customer name and customer id and the grid with each branch location and available quantity. Everything I've been reading suggest the datasource can not be a complex object. Is this true? What would be the best approach for me to take to get my results?

    Thanks!
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 23 Sep 2013 Link to this post

    Hello Albert,

    The data is probably not loaded yet when assigning the Grid dataSource data. You should use the dataSource change event instead to create the Grid or set its data. I created a small jsBin example that demonstrates this scenario.
    Also, note that the dataSource schema option should be an object.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top