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
20
Performance Issue in Infragistics Ignite UI Grid
posted

Hello,

I am trying to integrate the Ignite UI igGrid control in my app when i try to load the grid with 1000 rows it works fine but when I try to load the grid with 10,000 or more rows the Chrome page stops responding. Any one have tried with huge data set on Ignite UI please share the solution.

Parents
  • 240
    Offline posted

    Hello Anthony,

    I would like to provide you with some insights on handling large datasets in the igGrid component of your application to ensure smooth performance.

    When working with extensive datasets containing thousands of records, the Virtualization property of the igGrid can be a highly effective solution. This feature enhances performance by improving rendering time, scrolling, and memory usage. Here’s how it works:

    • Virtualization reduces the number of DOM objects in-memory, reusing them dynamically as the user scrolls through and interacts with the data.
    • This significantly minimizes the browser's memory footprint, allowing for seamless operations even with large data volumes.

    In an ASP.NET Core MVC project, you can enable Virtualization in the igGrid with the following configuration:

    Html.Infragistics().Grid(Model)
        .ID("uigProducts")
        .PrimaryKey("ID")
        .Height("400px") // Specify the exact height of the grid
        .Virtualization(true)
        .VirtualizationMode(VirtualizationMode.Continuous)
        .Render()

    It is essential to specify the exact height of the grid for Virtualization to function effectively.

    Apart from Virtualization, the Paging feature is another excellent way to boost performance. Paging divides the data into smaller, more manageable chunks, displaying a subset of rows per page. This approach reduces the initial rendering load and enhances responsiveness.

    Here’s an example configuration for enabling Paging in the igGrid:

    Html.Infragistics().Grid(Model)
        .ID("uigProducts")
        .PrimaryKey("ID")
        .Height("400px")
        .Features(feature =>{features.Paging().PageSize(5);})
        .Render()
    

    If you have any further questions or need assistance with implementing these features, feel free to reach out.
    Please note that due to limited staff during the Christmas holidays, response times may be longer than usual—thank you for your patience and understanding.

    Happy New Year!

    Best Regards,
    Arkan Ahmedov,
    Infragistics
  • 0
    Offline posted in reply to Arkan Ahmedov

    speed stars   I want to provide some tips with you on how to manage big datasets in your application's igGrid component to guarantee seamless operation.

Reply Children
No Data