Specifying the data that a column filter applies to on a flex grid

Specifying the data that a column filter applies to on a flex grid

Posted by: davidmartin-bennett on 22 October 2023, 10:44 pm EST

• 

  davidmartin-bennett

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 October 2023, 10:44 pm EST

  Hi

  Is there a way to specify which data parameter a applies to, similar to the way we can set the sortMemberPath to tell the grid which data value the column sorts.

  So if we have a data object like

  data [
  
  {
  
  Name: ‘example’,
  
  Age: 1,
  
  DateOfBirth: 21/10/2023,
  
  OtherValue: “Something”
  
  },{
  
  Name: ‘example 2’,
  
  Age: 2,
  
  DateOfBirth: 22/10/2023,
  
  OtherValue: “Something else”
  
  },{
  
  Name: ‘example 3’,
  
  Age: 3,
  
  DateOfBirth: 23/10/2023,
  
  OtherValue: “Something other”
  
  },
  
  ]

  the column could be set up as
  
  binding: ‘Age’
  
  sortMemberPath: ‘DateOfBirth’
  
  filterMemberPath: ‘DateOfBirth’

  This would then display the age in the grid but allow the user to sort and filter on the DateOfBirth parameter.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 24 October 2023, 8:03 pm EST

  Hello,

  Based on our understanding, you want to display ‘DateOfBirth’ values in the FlexGridFilter instead of ‘Age.’ If that’s the case, you can create a DataMap to associate DateOfBirth values with their corresponding Age values, and then set this DataMap in the ValueFilter’s dataMap property. For reference, please check out the sample link below:

  https://stackblitz.com/edit/angular-fmxjai?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  davidmartin-bennett

  • Post Options:
  • Link
    Copy

  Posted 24 October 2023, 8:10 pm EST

  Hi

  That’s almost perfect, but what we actually want is to be able to filter by the DateOfBirth values in the flex grid filter, as in have them function as dates rather than text.

  The provided example almost does this but when selecting filter by condition, the conditions are for strings rather than Is Before, Is After etc that you could get with a date filter

  Kind regards

  David

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 25 October 2023, 4:31 pm EST

  Hello,

  As per your use case, it seems that you only want to display ‘Age’ values in the ‘DateOfBirth’ column as you intend to perform sorting and filtering based on the ‘DateOfBirth’ as well. In that case, you can bind the column to ‘DateOfBirth’ and utilize cell templates to display ‘Age’ values within the cells. Additionally, set the ‘dataType’ property to “Date” to enable filter operators for the Date type column.

  If your data source contains date values in string format, you can override the ‘conditionFilter’ and convert the date string values into date objects to facilitate proper condition filtering. Please refer to the updated sample link below for more details.

  https://stackblitz.com/edit/angular-ppl1a4?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

  Regards

• 

  davidmartin-bennett

  • Post Options:
  • Link
    Copy

  Posted 25 October 2023, 8:09 pm EST

  Hi

  Yes this is exactly what I want, thank you

  Kind regards

  David