0

I will start with description of my situation.

  1. I use pagination. In most hard situation my grid has 100 rows and 120 columns.

  2. I use features like: sorting, grouping, rows selections, column hiding, column moving, remote and local paging, column fixing (freezing).

I don't have influence on this requirements - business requires it and I can't change it. The problem is that performance is not acceptable I i have to improve it. Actually I don't know how can I achieve it.

Performance of rendered grid is quite well but time needed for rendering the grid is absolutely not acceptable.

In chrome it requires about 40 seconds to render the grid. In Internet Explorer (which I have to support) rendering the grid last about 2 minutes. These times are for 100 rows and 120 columns with 4 fixed columns (I have found out that fixing columns has huge impact on performance - without fixing rendering last 19 second, with 4 fixed columns it last 40 seconds in chrome). These times are needed for only rendering the grid, when configuration is calculated - in other words this is time from moment when I execute igGrid(config_object) with ready configuration_object function to the moment when grid is rendered.

I have read about virtualization the grid but it helps a little because I can't use columns virtualization with features which are required. To be honest, with these limitations there is a little difference between the grid and simple table with virtual scrolls. Appending rows virtualization helps a bit but it is not enough and because of number of rows there is a decrease of performance in using the grid - it lags while scrolling.

My questions are:

  • How can I improve this performance, is it possible at all using Igniete UI?

  • What times am I able to achieve with perfect optimized grid configurations with 100 rows, 120 columns and applied features which I have listed?

  • How can I reduce fixing feature impact on performance?

  • Also I have found out that with row virtualization there are created about 70 rows in DOM if I have 100 rows on the page. Maybe there is a way to reduce to have faster rendering?

  • Maybe there is a way actually to display the grid for example with 20 rows and 20 columns, make he grid usable and render the rest later?

SigGP
  • 716
  • 1
  • 11
  • 24

2 Answers2

4

The bigger performance overhead is caused by the 120 columns that are rendered. By default igGrid is not virtualized horizontally, and even if you turn the virtualization on, it is not compatible with some of the features that you have to enable in your requirement. Still the times that you're getting for Chrome are not what they should be, and my suggestion would be to address this at the Infragistics support.

Meanwhile there's this article in the help, which provides guidance on how to make the performance optimal with the igGrid.

Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
3

With the latest version of IgniteUI for JavaScript – version 18.2, with the specified settings I was not able to get the same results when testing the initial loading performance. Here’s a jsFiddle with the applied settings for your reference:

$("#grid").igGrid({...});

http://jsfiddle.net/ojpydtwm/

The initial time to render I have observed is as follows:

  • On Chrome with initially fixed columns – around 3.5 seconds
  • On Chrome without initially fixed columns – around 2.5 seconds
  • On IE with initially fixed columns - around 9.5 seconds
  • On IE without initially fixed columns – around 6 seconds
Maya Kirova
  • 181
  • 2