Slow performance with grid selector

Slow performance with grid selector

Posted by: luthfi on 13 June 2020, 9:08 pm EST

• 

  luthfi

  • Post Options:
  • Link
    Copy

  Posted 13 June 2020, 9:08 pm EST

  I’m trying a very simple code to show checkbox selector in the row headers, but the performance is slow even with only 200 rows of data is bound to the grid.

  I’ve attached a sample app created with React CRA, try running the code and check the select all checkbox on the upper left corner of the grid, there is a slight delay before all the rows are selected, also if you open the developer tools console there are a lot of Violation warnings printed.

  grid.zip[img]https://gccontent.blob.core.windows.net/forum-uploads/file-b544aa8f-56e8-4731-8e36-9853c868b305.png[/img]

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 15 June 2020, 2:53 am EST

  Hi,

  This is an issue of CSS instead of the Selector. 200 rows doesn’t seems like much, but if all the 200 rows are displayed on the DOM, then the overall performance decreases because the DOM has to render more cells.
  
  FlexGrid uses virtualization to create rows and columns. This means that the html element will be created only for those cells which are displayed on the DOM. As you will scroll the grid, the original cell elements will only be updated with the data and will not be re-created, thereby increasing the performance.
  
  So, in your sample, you just need to set the height of the grid and the performance will increase. Please refer to the updated sample attached.

  Regards,
  
  Ashwin

  selector.zip

• 

  luthfi

  • Post Options:
  • Link
    Copy

  Posted 15 June 2020, 4:43 am EST

  Thanks for the advice, is there any other workaround? I really would like to avoid having two vertical scrollbars on the page, I don’t need the selected grid rows to be highlighted as long as the checkboxes are checked it should be enough indicator for selected rows, may be that way it will be faster since there are no changes to the row css

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 16 June 2020, 3:03 am EST

  Hi,

  The isSelected property of Row, by which the checkbox is bound, will update the CSS of the rows. We cannot change this behavior. But, there is another way by which you can reduce the number of cells displayed and also remove the vertical scrollbar.

  You can use paging in the flexgrid. This will display less number of rows on a single page, thereby increasing the performance.

  Now, there are two types of paging, the default one is the collectionview paging. In this type, the flexgrid is only bound to the data displayed on the current page. For example, if there are 200 items and the pageSize is 10, then the grid will be bound only to the 10 items. It will not know anything about the remaining 190 items.

  Demo of paging: https://www.grapecity.com/wijmo/demos/Grid/PagingScrolling/Client-sidePaging/react

  But this paging may cause issue in your application because if you will select all the items, then only the displayed 10 items will be selected and the other 190 will not.

  The other type of paging is the FlexGrid level paging. This paging uses the FlexGridPager class to implement paging on the grid level so the grid knows about all the 200 items but displays only the 10 items. This class is not shipped with our Wijmo package so we have created a demo to implement it.

  Demo: https://demos.wijmo.com/5/PureJS/FlexGridPager/FlexGridPager/
  
  Source code: https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/FlexGridPager/PureJS/Code

  I hope this helps.

  ~regards

• 

  luthfi

  • Post Options:
  • Link
    Copy

  Posted 16 June 2020, 4:53 am EST

  Thanks, but unfortunately the 200 rows is already paged from much larger dataset. I’m trying to migrate our old grid to FlexGrid and the old grid already has some set of functionalities that we’re trying not to change, including the page size, currently user can change the page size from 25 to 200 rows per page.

  If there’s a property that we can use to turn off highlight for the selected rows then that would be great.

  But I guess I’ll just have to take a look at this sample with custom checkbox
  
  https://www.grapecity.com/forums/wijmo/how-can-i-put-a-check-box-
  
  and try to manage the selected rows within our component.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 June 2020, 5:21 am EST

  Hi,

  We cannot change the selection of the grid but even if we could, the issue will still exist. As I said earlier, the grid has to create more cells if the height is large. And, when all the rows are selected, all these rows are recreated again, which slows the performance.
  
  You can add the checkbox manually by using the sample in the forum link and if it works for you, then you may keep using it.

  ~regards