Wijmo FlexGrid: Group header by custom data

Wijmo FlexGrid: Group header by custom data

Posted by: nguyenvietloc on 4 December 2019, 2:53 pm EST

• 

  nguyenvietloc

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 December 2019, 2:53 pm EST - Updated 3 October 2022, 9:36 am EST

  Hi,
  
  I’m using Wijmo FlexGrid and AngularJs.

  I have a question. See the image below.

  

  793×1583 76.4 KB

  Thank you.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 5 December 2019, 10:50 pm EST

  Hi Nguyen,

  To create custom groups we need to push instance of PropertyGroupDescription on the collectionView.groupDescriptions collection.
  
  PropertyGroupDescription’s constructor allows us to pass a convertor function as the second argument to convert the values into the required group names. Please refer to the following code snippet and the sample which demonstrates the same:

  let groupDescription = new wijmo.collections.PropertyGroupDescription("code", function(item, propName){
        let rgx = /^[a-z]+/i;
        	if(!item[propName] || !rgx.exec(item[propName])){
          	return item[propName];
          }
          
          return rgx.exec(item[propName])[0];
        });      
  grid.collectionView.groupDescriptions.push(groupDescription);
  

  https://jsfiddle.net/nm1s5k7e/

  Regards
  
  Sharad

• 

  nguyenvietloc

  • Post Options:
  • Link
    Copy

  Posted 8 December 2019, 1:00 am EST

  Thank you for your answer!