FlexGrid - Filter column by date range

FlexGrid - Filter column by date range

Posted by: ssmith on 5 December 2018, 7:14 am EST

• 

  ssmith

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 December 2018, 7:14 am EST - Updated 3 October 2022, 11:16 am EST

  We’re using FlexGrid in an Angular7 application to display rows of names and birthdates, and would like to be able to use the column filter option to select a set of records between two dates, for example - 1/1/2018 … 4/1/2018

  Is there a way to do this?

  

  283×566 25.2 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 6 December 2018, 5:57 pm EST

  You may easily do so using the condition filter.
  
  Please follow the following steps:
  
  • Open ColumnFilterEditor of the date column by clicking on the filter icon
  
  • select ‘Filter by condition’
  
  • select the first condition as ‘Is After’ and select the first date as 1/1/2018
  
  • select the second condition as ‘Is Before’ and select the second date as 4/1/2018
  
  • Click the ‘Apply’ button to apply the filter

  ~Sharad

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 10 December 2018, 8:49 am EST - Updated 3 October 2022, 11:16 am EST

  Even though my data-type is set to ‘date’, I don’t have ‘Is Before’ and ‘Is After’ options, just the ones below. Is there something off in the way I’m structuring the column?

            <wj-flex-grid-column [header]="'Birth Date'" [binding]="'birthdate'" format="dd/MMM/yyyy" data-type="date" align="center" [width]="'*'">
              <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
                <span>{{item.birthdate | date}}</span>
              </ng-template>
            </wj-flex-grid-column>
  
  

  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 10 December 2018, 5:06 pm EST

  In angular2+ applications, we need to define dataType using the following syntax:

  <wj-flex-grid-column [header]="'Birth Date'" [binding]="'birthdate'" format="dd/MMM/yyyy" dataType="Date" align="center" [width]="'*'">
  </wj-flex-grid-column>
  

  or

  <wj-flex-grid-column [header]="'Birth Date'" [binding]="'birthdate'" format="dd/MMM/yyyy" [dataType]="'Date'" align="center" [width]="'*'">
  </wj-flex-grid-column>
  

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

  Please let us know if the issue still persists.