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
65
Improving the performance of the igTreeGrid with large data sets
posted

Hi,

   I am using the 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%",
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"
}


]
});
Parents
  • 17590
    Offline posted

    Hello Saikiran,

    Thank you for posting in our community.

    I created a small sample using igTreeGrid. In my sample I have approximately 62 000 record in the grid and on my side it loads for less than 5 seconds. I am using Paging feature of igTreeGrid.

    I am attaching my sample for your reference. Please test it on your side and let me know what is the result. If this is not an accurate demonstration of what you are trying to achieve please feel fee to modify it and send it back to me for further investigation.

    In regards to the LoadOnDemand feature, it allows binding to a remote data source and only initially loading the visible data into the grid. Additional data is available by making remote request for child records "on demand" as the parents are expanded. This type of interaction allows foe a faster page load, faster Tree Grid binding, a lighter initial footprint and potential for presenting the most up-to-date data.

    I believe you will find the following article from our documentation useful for better understanding of the feature:

    Load on Demand(igTreeGrid)

    Additionally, a working sample illustrating how this feature works could be found at:

    www.igniteui.com/.../load-on-demand

    I hope you find my information helpful.

    Please let me know if you have any additional questions regarding this matter.

    igTreeGridManyRecords.zip
Reply Children