Sort multiple columns in same order clicking 1 column on React Wijmo Flexgrid

Sort multiple columns in same order clicking 1 column on React Wijmo Flexgrid

Posted by: ozan.bilgic on 6 June 2023, 8:24 am EST

• 

  ozan.bilgic

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 June 2023, 8:24 am EST - Updated 6 June 2023, 8:30 am EST

  

  2456×1044 188 KB

  I use react wijmo flexgrid. I have groups on my sheet. Columns for these groups are not shown, so I am having a problem with sorting.
  
  When I click Name column, I want entityType group to be sorted in same order as well.

  flexgrid itemSource prop is source state and I use this way for grouping items:

   useEffect(() => {
      setSource(
        new CollectionView(wijmoData, {
          groupDescriptions: ['entityType', 'kind'],
          currentItem: null,
        })
      );
    }, [searchText, wijmoData]);

  Thanks.

• 

  ozan.bilgic

  • Post Options:
  • Link
    Copy

  Posted 7 June 2023, 6:31 am EST

   flexgrid.collectionView.sortConverter = (
        sd: SortDescription,
        item: any,
        value: any
      ) => {
        if (sd.property === 'name') {
          return item.entityType + ' ' + item.kind + ' ' + value;
        }
      };

  Worked for me.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 7 June 2023, 8:18 am EST

  We are glad that you were able to resolve the issue on your own. Thank you for sharing the solution with us, it can potentially assist others who encounter similar issues.

  Regards

• 

  ozan.bilgic

  • Post Options:
  • Link
    Copy

  Posted 8 June 2023, 8:16 am EST

  Hi I have one more question, 2. level group includes ‘Kind’. When I sort ‘Name’ column order of ‘Kind’ changes. But I always want Kind to be in the same order 1) Property and 2) NavigationProperty.
  
  Is it possible to achieve this?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 9 June 2023, 8:37 am EST

  Hello,

  As per our understanding, you want to only sort Column EntityType when the Name columnHeader is clicked, if so then you may remove the item.kind column sorting from sortConverter’s callback function. Please refer to the below code snippet and sample link for reference:

   flexgrid.collectionView.sortConverter = (
        sd: SortDescription,
        item: any,
        value: any
      ) => {
        if (sd.property === 'name') {
          return item.entityType + ' ' + value;
        }
      };

  https://stackblitz.com/edit/react-9akjet?file=Hello.js

  Regards