Dropdown taking long time to show 37K rows in wijmo grid

Dropdown taking long time to show 37K rows in wijmo grid

Posted by: chandra.malla on 9 January 2023, 12:52 am EST

• 

  chandra.malla

  • Post Options:
  • Link
    Copy

  Posted 9 January 2023, 12:52 am EST

  Hi Team,

  We have an api which loads 37000 rows. W are trying to show this data in wijmo grid cell dropdown. Dropdown is able to handle for small data. But, taking long time to load this huge data. Please suggest an approach to get this done.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2023, 6:30 pm EST

  Hi,

  To avoid this issue, you can use the ‘ComboBox’ control as an editor for the flexGrid column, and set it’s ‘virtualizationThreshold’ property to a small number like 100, to enable virtualization.

  Please refer to the following sample for its implementation - https://stackblitz.com/edit/js-gyimto?file=index.js

  Regards

• 

  chandra.malla

  • Post Options:
  • Link
    Copy

  Posted 10 January 2023, 4:21 pm EST

  Hi Vivek,

  Thank you for the solution. But, still it is taking around 3 mins to display the dropdown. Am I need to do anything else here?
  
  <wj-combo-box
  
  #combo
  
  [itemsSource]=“columnDropdownOptions”
  
  [virtualizationThreshold]=“100”
  
  [displayMemberPath]=“‘label’”
  
  [selectedValuePath]=“‘value’”
  
  [(selectedValue)]=“cell.value”
  
  [isEditable]=“true”
  
  [isRequired]=“false”
  
  (lostFocus)=“lostFocus(combo, wijmoHeader)”
  
  >
  
  

  Thanks & Regards,
  
  Chandra

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 11 January 2023, 4:11 pm EST

  Hi,

  Sorry, but we are unable to replicate the issue on our end, can you please share a small sample replicating your issue, on which we can investigate and assist you accordingly?

  You can also update the following sample to replicate your issue and share with us - https://stackblitz.com/edit/angular-dzgiij?file=src/app/app.component.html

  Regards

• 

  chandra.malla

  • Post Options:
  • Link
    Copy

  Posted 22 January 2023, 5:30 pm EST

  Hi Vivek,

  Sorry for the late. I’m able to reproduce the scenario in stackblitz. Please check it https://stackblitz.com/edit/angular-p3rjag?file=src%2Fapp%2Fapp.component.html.

  Added a new column ‘country1’ to the table. When you click on the drop drown, the page gets hanged.

  Please let me know if you need anything else.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 23 January 2023, 5:51 pm EST

  Hi,

  It seems that you are using the comboBox inside the cell template, which is causing this issue. It seems to be a bug so we have forwarded this issue to the dev team for further investigation with internal tracking id - WJM-25872. We will update you as soon as we have an update from the dev team. Meanwhile, to prevent this you can avoid using the ComboBox inside the cell template and use it as an editor for the column by assigning it to the columns ‘editor’ property.

  In case, you want to remove the dropdown arrow from the grid cell, then you can set the ‘showDropDown’ property of the flexGrid to false. Now the dropdown button will only be visible in the edit mode.

  Please refer to the following sample for the same - https://stackblitz.com/edit/angular-sr6kog?file=src/app/app.component.html

  Regards