Search code examples
infragisticsignite-uiiggrid

How improve performance in igGrid from Infragistics Ignite-UI?

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?

Solution

  • 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