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
Tory Eneboe
620
app becomes unresponsive for long period of time when IgCombo is binding to large data set (~ 1000 items)
posted

We are using ignite ui version 2016.1.  Our Angular 4 based web-site has a couple of ig-combo controls with about 1000 items in each combobox.  In different scenarios, our site will become unresponsive for long period of times.  If I reduce the number of items in the comboboxes to about 200 items each, the unresponsiveness goes away.

I have created a test application that demonstrates the issue. 

===== Prepare app ================================================

1) You will need NPM and the Angular CLI installed.

2) Download the attached zip.

3) Run 'npm install' to rehydrate the packages

4) Copy the ignite ui distribution into the following directories.


misc_modules\ignite-ui\css
misc_modules\ignite-ui\js


This is to satisfy the following references found in angular-cli.json...
      "styles": [
        "styles.css",
        "./assets/css/font-awesome.css",
        "../misc_modules/ignite-ui/css/structure/infragistics.css",
        "../misc_modules/ignite-ui/css/themes/infragistics/infragistics.theme.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/jquery-ui-bundle/jquery-ui.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js",
        "../misc_modules/ignite-ui/js/infragistics.core.js",
        "../misc_modules/ignite-ui/js/infragistics.lob.js",
        "../node_modules/spin.js/spin.js"
      ],

===== Reproduce issue ===========================================

1) app.component.ts contains the code of interest.  Scroll to the very bottom of that file to see my comments.

2) 'ng serve' the application.  Press the 'Populate' button.  The app will become unresponsive for quite a while.  You will not be able to interact w/ the combobox.

3) Now change where the data gets loaded (instead of having the data loaded in the OnPopuplateClick method, have the data loaded in the constructor ... again, see my comments).  Rerun the application.  The app is immediately responsive.

Is there anything we can do to fix or mitigate this issue?  Are we doing something wrong in our code?  Without explaining the flow of our application in detail, I need to be able to bind the combobox data after the page has been loaded.

combo-issue.zip
  • 845
    Offline posted

    Hello Tory,

    Thank you for contacting Infragistics Developer Support!

    After running the provided sample it seems to me the performance issue comes from the ngDoCheck hook of the combo.

    I suggest you log an issue at https://github.com/IgniteUI/igniteui-angular2/issues

    You mentioned that you need to data bind after component initialization. A possible solution is to "stream" the data in chunks and re-bind the combo after

    each chunk.