load data from database when click expand icon in treegrid

[Harry Zheng]

Hi,

I am using treegrid with asp.net mvc to display hierarchical data. Since I have so many records, it takes long time to load all the data.

I wonder if I can do this in treegrid:

Initially I only load parent data, which has much fewer records.

If user click expand icon for one parent record, it will make ajax call to get children records for the parent record and display in treegrid.

Right now I can get the children records back after click expand icon, but the children records cannot be displayed.

So I wonder how I can implement this function.

Here is my script code:

function expand(args)
        {
            var data = args.data;
            var record=args.data.item;
            var dataLevel = data.level;
            var treeGridObj = $("#ForecastGrid").data("ejTreeGrid");
            var columnCollection = treeGridObj.model.columns;
            $.ajax({
                type:"POST",
                url: "Forecast/AddChildData",,
                data: record,
                dataType: "json",
                success: function(data){
                    args.data.item=data;
                    args.data=data;
                    treeGridObj.renderRecords();
                   }
            });

    ..........................

[Mahalakshmi Karthikeyan]

Hi Harry,

Sorry about the inconvenience caused.

Currently there is no support for load on demand as like your requirement, but it has built-in support to render large data along with multi-level hierarchies in virtualization approach by using “EnableVirtualization” property. In virtualization mode the Treegrid control renders or we can able to visualize only few rows of data at a time, depending upon the height of the Treegrid control (viewport/view height), thereby increasing the responsiveness in Treegrid while scrolling, expanding, collapsing and other such actions. The child records won’t get render until we expand its parent as per your requirement. In virtualization concept, the scrollbar or scroller of Treegrid is intended to render as if there are large data, but actually the rows which are viewable alone are rendered, even while scrolling the Treegrid content. You can achieve the virtualization in Treegrid with below code snippet,

@(Html.EJ().TreeGrid("TreeGridContainer").

       //…

       EnableVirtualization(true)

)

We have also prepared a sample with 30000 records in virtualization mode. And please find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/119975/ze/TreeGridLargeData-982025057

Is this your requirement or else please get back to us with more details about your browser version? So that we can serve you better.

Regards,

Mahalakshmi K.

[Harry Zheng]

Hi Mahalakshmi,

Thank you for the reply. I did use EnableVirtualization(true), but it takes 70s to display 10000 records.

I am wondering if serialization process could be the reason cause slow.

Or do you have any other solution to speed up data loading into treegrid?

Thanks,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,

Sorry about the inconvenience caused.

For your kind information, we can render more than 10000 records of JSON data in virtualization mode within 3 seconds. But in case of self-reference data source we need to convert all the 10000 flat records into hierarchical  data source to make sense. So obviously it takes some time more than to render JSON data source. We are also analyzing on this to optimize the conversion process for converting the flat data into hierarchical data.

Can you please share us the maximum level of hierarchy you are using in your project ? Also if possible please share the data you are using to render in TreeGrid and the browser you using to run the project, This will be helpful for us to serve you better.

Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.

[Harry Zheng]

Hi Mahalakshmi,

Thank you for your message. I tried your sample. It's indeed very fast. But if I add the property .EnableCollapseAll(true) to the treegrid, the running time changed to 33s from 3s.

Similarly, in my project, if I remove .EnableCollapseAll(true), the running time changed to 35s from 70s.

I wonder if there is a way to keep enablecollaspleAll property and still keep it fast, since we need collapse all row when user open the page.

The data for my project is very similar as the data in your sample, only difference is that my data is populated with data queried from database using several stored procedures, and I have 3 level of  hierarchical data. I am using internet explorer 11.

Thank you,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,

Sorry for the inconvenience caused.

For your kind information, we can also reproduce the time delay while rendering TreeGrid with large data in virtualization mode with “EnableCollapseAll” is enabled. So we are analyzing on the various scenarios to optimize the time taken to load large data with  ‘EnableCollapseAll’ property enabled, and as we are analyzing with our source architecture to optimize the performance we need some more time for this. So we will update the status of this in 2 business days (08/26/2015).

Regards,

Mahalakshmi K.

[Mahalakshmi Karthikeyan]

Hi Harry,
Sorry about the inconvenience caused.

We can also able to reproduce the time delay while loading Treegrid in “EnableCollapseAll” enabled mode with large Data in self reference data source. Hence we have logged a feature report regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.