Slow performance loading igGrid with large json data set

Hello,

I have a data set of 25,000 rows, 12 columns and for the table to load onto the page it takes about 17 seconds or more on avg. I'm wondering if there is anyways to optimize this. I have a js file that sets a var = to the json data(as in many of the examples) and I add the features sorting, resizing, column moving, and filtering(which also are very slow). I also autoGenerate the columns. my Grid code looks like this:

$("#grid").igGrid({
dataSource: data, //JSON Array defined above
autoGenerateColumns: true,
features: [

{

name: "Sorting",
type: "local"
},
{
name: "Resizing"
},
{
name: "ColumnMoving",
columnMovingDialogContainment: "window"
},
{
name: "Filtering",
type: "local",
mode: "simple"//,
//filterDialogContainment: "window"
}

]
});

Please let me know if there is any way I can make this faster.

Thanks,

Kelsey Skaarva

Hello Kelsey,

Thank you for posting in our community.

I believe you will find the following article in our documentation helpful for improving the performance of your igGrid.

Performance Guide (igGrid)

Basically this topic provides you information on how the grid could be configured with performance in mind.

From the code snippet provided I assume that you do not have either Paging feature of Virtualization enabled for your igGrid.

Paging feature allows you to divide your data in pages so that you can achieve better performance by fetching only a predefined number of records from your original data source.

Virtualization is another feature that could be used for better performance. Virtualization is feature of the igGrid control that reduces the number of active in-memory DOM objects. Virtualization achieves complete transparency in user experience as compared to a non-virtualized grid.

Please have a look at the provided information and do not hesitate to contact me if you have any additional questions afterwards.

Hello Vasya,

So paging is not an option. I am researching different tables I could use for a trading application for Citi bank and we need all the data in 1 scrollable page. I read about the virtualization and it seemed like it would work. I added the lines

rowvirtualization: true,
virtualizationMode: "continuous",
height: "100%",
width: "100%",

to my grid however it didn't improve the performance. Actually I timed it using google chrome and the rendering time got longer by about a second with the virtualization. Perhaps I am adding the virtualization in wrong or if not maybe you have some other ideas about how I might improve the tables rendering speed. 

Thanks,

Kelsey

Hello Kelsey,

Thank you for getting back to me.

Since virtualization is supposed to increase performance the behavior that you are experiencing on your side seems unusual to me.

In order to investigate this further I will need a small isolated sample where the behavior is reproducible. Please create one, using the same grid settings as in your real application with a sample data source with 25000 records.

Having a working sample that I can debug on my side will help me look further in your case in pursuit of the root cause for this behavior.

I am looking forward to hearing from you.

Hi Vasya,

Okay sounds great I have attached a zip with both my html page and a js file that has a sample data set with 25,000 rows. when I open this html page with chrome and have the virtualization code in I get an average of 11.62s for rendering. When I have the virtualization code commented out I get an average of 8.86s for rendering. I should also mention the amount of data could potentially be 100,000 rows x 100 columns so it would have to be fast for a data set that size also but I was just working at 25,000 rows as a starting point.

Thanks,
Kelsey 

Hello Kelsey,

I think you misspelled the "rowVirtualization" option and as a result the Virtualization feature was not enabled. Also if you want virtualization enabled setting height: "100%" is not working. You should set it in pixels.

I modified your sample a bit and as a result now the igGrid renders for ~1.5 secs. You can find it attached.

Best regards,
Martin Pavlov
Infragistics, Inc.