Forums Ignite UI for jQuery
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
Close
Jerzy Kosik
55
Improve performance in igGrid
posted

Hi,

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 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?

Thanks for help!

  • 29417
    Offline posted

    Hello Jerzy,

     Thank you for posting in our forum.

    I’ve created a sample using the latest version of IgniteUI (version 18.2) based on the scenario you have described however I was not able to get the same initial rendering timing results . 

    Here’s  a js fiddle sample for your reference:

    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

     It would help if you could test it on your side and let me know if you get different results (perhaps due to the specific environment on which you’re testing or if you are using a different version of IgniteUI) or if perhaps you have some additional features and setting enabled that also affect the performance. If you do have some other features and settings applied that make the initial rendering 10 times slower please let me know so that I may suggest possible optimizations around them. 

    The main bottleneck with the current settings of the sample seems to be the column rendering. Unfortunately there’s not much that can be done for the column rendering as the only feature that can limit the amount of columns rendered is the column virtualization and it is not compatible with some of the features you have listed (https://www.igniteui.com/help/feature-compatibility-matrix(iggrid) ). 

    For the column fixing, you could apply the fixing post initialization via the API: www.igniteui.com/.../ui.iggridcolumnfixing , which should improve the initial rendering slightly. 

    Row virtualization might also help to some extent. Depending on which type of virtualization you use the amount of rows rendered in the DOM may vary. With “continuous” virtualization – the amount of rows that should be rendered in the Dom are calculated runtime, depending on how many fit in the view port and how many columns you have. With “fixed” virtualization - the amount of rows that should be rendered in the Dom are calculated initially based on the set height of the grid and the avgRowHeight option of the grid. You may try using “fixed” since you’ll have more control over how many rows you want to render. You can refer to the virtualization topic: https://www.igniteui.com/help/iggrid-enabling-and-configuring-virtualization#fixed-row

     Here’s a sample where fixed virtualization is used with fixed columns applied after the grid renderes:

    http://jsfiddle.net/ojpydtwm/1/

    Where the initial render time on my side is around 1~1.2 seconds on Chrome and around 2.7~3 second on IE. 

    Let me know if there’s anything else I can help you with.

    Regards,

    Maya Kirova