how to increase the Infragistics igTreeGrid performance

Question

I am using the "Infragistics igTreeGrid" in my application to display the records.Every thing works fine when i provide less number of records to the grid, but my requirement is to display around 40,000 records at a time. so when i provide these many records to the grid ,it is taking around 2mins of time which is very high. So what should i do to improve the performance atleast to half of the current time. I have looked at the "Virtualization" and "load on demand" ,I didn't get exactly what they are. When i use virtualization grid is taking more time than without the virtualization and may i know how load on demand works and how can i provide only some part of the data to the grid using load on demand when there is a parent child relation between the nodes.Here is the code which i have used, can any one help me out of this issue.

$("#treegrid").igTreeGrid({

            dataSource: totalObjects,
            width: "100%",
            //rowEditDialogHeight: "100px",
            autoGenerateColumns: false,
            enableDeleteRow: false,
            primaryKey: "name",
            foreignKey: "parent",
            editMode: "cell",
            initialExpandDepth: 1,
           /* virtualization : true,
            virtualizationMode : "continuous",
            height : "400px",*/
            columns: [
                {headerText: "Product Hierarchy", key: "name", dataType: "string", readOnly: "true"},
                {
                    headerText: "Associated Materials",
                    key: "associations",
                    width: "120px",
                    dataType: "string",
                    readOnly: "true"
                },
                {headerText: "Level", key: "key", width: "50px", dataType: "string", readOnly: "true"},
                {headerText: "Description", key: "excel_desc", dataType: "string", editable: "true"},
                {
                    headerText: "SAP Description", key: "sap_desc", dataType: "string", readOnly: "true"
                    //editorType: "text",

                    //editorOptions: {textMode: "multiline",maxLength: 100}
                },
                // { headerText: "", key: "source",  dataType: "string", readOnly:"true",hidden: true },


            ],


            childDataKey: "children",
            initialExpandDepth: 0,
            features: [

                {
                    name: "Responsive"
                },
                {
                    name: "Resizing"
                },
                {
                    name: "Paging",
                    pageSize: 8,
                    mode: 'allLevels'
                },

                //filtering & sorting
                {
                    name: "Filtering",
                    type: "local",
                    mode: "simple",
                    filterDialogContainment: "window",
                    columnSettings: [
                        {
                            columnKey: "name",
                            condition: "startsWith"

                        },
                        {
                            columnKey: "associations",
                            condition: "equals"

                        },
                        {
                            columnKey: "key",
                            condition: "equals"

                        },
                        {
                            columnKey: "sap_desc",
                            condition: "equals"

                        },

                    ]

                },
                {
                    name: "Sorting",
                    type: "local"
                },



            ]
        });

My humble suggestion is to rethink about the use cases and user experience ( in spirit of modern UX ) of your app. What are your use cases? If somebody needs to have 40k items at hand will he prefer to have text box with autocomplete in order to pick-up the right ones or scroll up and down and click + and - to expand/collapse. Just imagine scrolling 40k. 40k implies search. Is not type-search faster than visual search in your case? Is not there any other better way of formulating the User Experience of your app - more effective with less clicks and scrolls? — Ognyan Dimitrov, Jan 29 '16 at 21:46
Here is a simple [jsFiddle](http://jsfiddle.net/1d2yd145/2/) based on your configuration. The igTreeGrid renders 40000 records in less than a second. What I can suggest you is to try to identify the bottleneck. See what's the time for data to be generated (extracted from DB and serialized as JSON) and what's the time for the grid to render. — Martin Pavlov, Feb 09 '16 at 11:36
Thanks for the reply Martin. I have checked my code,it is taking more time to generate the totalobjects which is taking around 90secs and grid initialization is taking around 9-12secs for 35k records. — saikiran bommagowni, Feb 11 '16 at 14:39
In the example you have provided it is taking just below 2secs,but in my case i am not giving the childrens directly,I am maintaining the primary and foreign key relation using the parent property so it is taking around 9-12 secs. So may i know how to reduce it with a primary and foreign key relation such as — saikiran bommagowni, Feb 11 '16 at 14:52
[{"name":"1AT","key":"1","parent":-1},{"name":"1ATAT04","key":"2","parent":"1AT"},{"name":"1ATAT043940","key":"3","parent":"1ATAT04"},{"name":"GAM","key":"1","parent":-1},{"name":"GAMAM01","key":"2","parent":"GAM"},{"name":"GAMAM017130","key":"3","parent":"GAMAM01"},{"name":"2EF","key":"1","parent":-1},{"name":"2EFEF08","key":"2","parent":"2EF"},{"name":"2EFEF083460","key":"3","parent":"2EFEF08"},{"name":"1AB","key":"1","parent":-1},{"name":"1ABAB12","key":"2","parent":"1AB"},{"name":"1ABAB121100","key":"3","parent":"1ABAB12"}] — saikiran bommagowni, Feb 11 '16 at 14:52
[{"name":"1AT","key":"1","parent":-1},{"name":"1ATAT04","key":"2","parent":"1AT"‌},{"name":"1ATAT043940","key":"3","parent":"1ATAT04"},{"name":"GAM","key":"1","pa‌rent":-1},{"name":"GAMAM01","key":"2","parent":"GAM"},{"name":"GAMAM017130","key"‌:"3","parent":"GAMAM01"},{"name":"2EF","key":"1","parent":-1},{"name":"2EFEF08","‌key":"2","parent":"2EF"},{"name":"2EFEF083460","key":"3","parent":"2EFEF08"},{"na‌me":"1AB","key":"1","parent":-1},{"name":"1ABAB12","key":"2","parent":"1AB"},{"na‌me":"1ABAB121100","key":"3","parent":"1ABAB12"}] — saikiran bommagowni, Feb 11 '16 at 15:16

score 0 · Answer 1 · answered Feb 16 '16 at 16:57

As provided in the comments the rendering time for 35k rows with foreign key relationship is ~10 seconds.

To improve it further either provide the child objects as child objects in the data source, and not with a foreign key, which will reduce rendering time to ~2 seconds, or use load on demand, which will load children for each parent only upon expansion of the parent.

Load on demand sample.

how to increase the Infragistics igTreeGrid performance

1 Answers1