Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Ray Webb
2515
Load On Demand Using Custom Code to Load Child Grids
posted

We are using Ignite UI 2014.2 to generate an igHierarchicalGrid. We currently have our own technique to retrieve data (in JSON format) using AJAX calls, but we also need to use Load On Demand techniques for the grid to avoid performance issues. 

I need to be able to do the following:

1. Dynamically assign a data source to the child grid associated with a parent row (where the parent row could be a root row or a row in a previously populated child that can have its own child grid).

2. Do the dynamic assignment after clicking the + to expand the row. Is there some event I should do this in? I would call our custom code using AJAX to generate a JSON string that I then want to set as the data source for the populating child grid.

I have read the techniques for using ASP.NET MVC, OData, or REST to perform the Load on Demand processing, but we need to use our custom method to obtain the data.

Parents
  • 2515
    Offline posted

    After searching the internet I came across a few ideas. I added a listener for event iggriddatabinding. If binding to a child grid the datasource would be set here for it. To test this I use the code below. The hierarchical grid is initially populated for the root only (initialDataBindDepth: 0). When I expand the root item the event iggriddatabinding is triggered and I receive the following error - "there was an error parsing/evaluating the json string: unexpected token ?"

    Any help would be appreciated, or a different solution to what was described in the initial post.

        <script>
                var data = [
                    {
                        Name: "Food",
                        Products: [
                            { Name: "Bread", Quantity: 3 },
                            { Name: "Pizza", Quantity: 4 }
                        ]
                    },
                    {
                        Name: "Beverages",
                        Products: [
                            { Name: "Milk", Quantity: 1 },
                            { Name: "Fruit punch", Quantity: 4 }
                        ]
                    }
                ];

                var data2 = [
                    {
                        Name: "Food"
                    }
                ];
       var data2JSON = JSON.stringify(data2);

                var data3 = [
                    {
         Name: "Bread",
         Quantity: 3
        },
                    {
         Name: "Pizza",
         Quantity: 4
        }
                ];
       var data3JSON = JSON.stringify(data3);

            $(function () {
                $("#hierarchicalGrid").igHierarchicalGrid({
                    width: "100%",
        odata: false,
        rest: false,
                    dataSource: data2JSON,
        dataSourceType: "json",
        autoGenerateColumns: false,
                    autoGenerateLayouts: false,
                    initialDataBindDepth: 0,
                    primaryKey: "Name",
                    columns: [
           { headerText: "Item Type", key: "Name" },
        ],
                    columnLayouts: [
                        {
          width: "50%",
                            key: "Products",
          dataSourceType: "json",
                            autoGenerateColumns: false,
                            autoGenerateLayouts: false,
                            primaryKey: "Name",
                            columns: [
                            { key: "Name", headerText: "Product Name" },
                            { key: "Quantity", headerText: "Quantity" },
                            ]
                        }
                    ],
                });

       $(document).on("iggriddatabinding", function (evt, ui) {
        //skip the event for the igHierarchicalGrid itself and only handle the child grids
        if (!ui.owner.element.hasClass("ui-iggrid-root")) {

         // add code here to build the JSON string for the current child grid
         
         //modify your data source here
         ui.owner.options.dataSource = data3JSON;
        }
       });


            });
        </script>

Reply Children
No Data