Sorting on wj-flex-grid in Angular

Sorting on wj-flex-grid in Angular

Posted by: ksm.ac.in on 20 August 2020, 9:54 am EST

• 

  ksm.ac.in

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 August 2020, 9:54 am EST - Updated 3 October 2022, 3:46 pm EST

  Hello Team GrapeCity,

  we are using this example
  
  https://stackblitz.com/edit/angular-v9hyhd?file=src%2Fapp%2Fapp.component.ts

  to show default sorting icon with header column name.

  Here we facing issue

  #1 on first time click sorting works but wj-glyph-up icon not changed to wj-glyph-down means icon not toggle. on second time click it start changing/toggling up to down or down to up.

  #2 whether it is first time or second click on sorting icon, it takes long time to sort .
  
  I reduced record to 25 from 100 but still it takes time

  I have attached this video link
  
  please have look into it
  
  https://www.screencast.com/t/7lJIiLl9r5ws

  Attached images, also you get better idea

  A. sort code in Html
  
  

  

  852×172 35.9 KB

  B. sort code in TS
  
  

  

  808×365 30.9 KB

  C. Sort code in CSS
  
  

  

  768×194 19.5 KB

  D. Inspect Element view: Default UP arrow
  
  

  

  1511×153 36.3 KB

  E. Inspect element view : down arrow
  
  

  

  1706×376 92.9 KB

  

  469×869 66.5 KB

  Hope this images and attached video link help to detect, exact reason our side .

  Thanks in Advance

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 August 2020, 12:47 am EST

  Hi,

  Regarding #1, on the first click, the column is sorted in ascending order, therefore, the glyph does not change as the custom glyph added is the same as of the ascending order glyph. We cannot change this behavior but we can change the display. So, I have updated the sample so that color, when sorting is applied, is different from when it is not applied. Please refer to the sample link below:

  https://stackblitz.com/edit/angular-v9hyhd

  Regarding #2, does the slow sorting only happens after adding the glyph customization? Also, in the loadedRows event, you are calling autoSizeColumns. This may also cause the performance issue as auto-sizing columns is an expensive process.

  Try removing the handler and let me know whether this resolves the performance issue.

  Regards,
  
  Ashwin