FlexGrid Column Filter - show formatted values in the filter instead of raw dat

FlexGrid Column Filter - show formatted values in the filter instead of raw dat

Posted by: ssmith on 10 December 2018, 8:56 am EST

• 

  ssmith

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 10 December 2018, 8:56 am EST

  We’re using Wijmo in Angular 7 applications, and we make heavy use of FlexGrid, and specifically the column filter option.

  We may have values of 0/1 fetched from the database that we display by way of in the grid as ‘On/Off’, or ‘Yes/No’ etc., however when we call up the column header filter, we’re only seeing the underlying raw data 0/1, and that’s confusing for the user.

  Is there a way to apply a similar formatting template to what’s shown in the filter so it mirrors what we’re displaying in the FlexGrid columns?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 10 December 2018, 5:30 pm EST

  Instead of using templates to change display value, you may use dataMap to get the desired functionality.
  
  Please refer to the following code snippet:

  ngOnInit(){
      let zeroOneMapStructure = [
        {value: 0, display: 'OFF'},
        {value: 1, display: 'ON'},
      ];
  
      this.zeroOneMap = new wjcGrid.DataMap(zeroOneMapStructure, 'value', 'display');
    }
  // in template
  <wj-flex-grid-column [binding]="'zeroOrOne'" [header]="'Zero/One'" [dataMap]="zeroOneMap" [showDropDown]="false"></wj-flex-grid-column>
  

  You may also refer to the following sample which demonstrates the same:
  
  https://stackblitz.com/edit/angular-vtahf6?file=src%2Fapp%2Fapp.component.html

  ~Sharad

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 11 December 2018, 3:01 am EST

  This is great, thank you.

  The StackBlitz example however, while defining the zeroOneMap in ngOnInit, doesn’t seem to apply it anywhere - it’s not referenced in the html grid definition as it is in your sample above.

  Can you review the StackBlitz example and confirm that it’s complete?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 11 December 2018, 4:42 pm EST

  We apologize for the mistake but accidentally I shared the sample for a different issue.
  
  Please refer to the following correct sample:
  
  https://stackblitz.com/edit/angular-pjaq4e?file=src/app/app.component.html

  Sorry for the inconvenience caused.

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 14 December 2018, 4:28 am EST

  Much better - thank you!