jQuery DataGrid - columns.headerFilter

See Also

• headerFilter

This option accepts one of the following values:

• Array of Objects
  A simple JavaScript array containing a collection of plain objects.

  jQuery

  JavaScript

  $(function () {
      $("#dataGridContainer").dxDataGrid({
          headerFilter: {
              dataSource: [{
                  text: "Zero",    // A string to be displayed in the UI
                  value: 0         // A single value  
              },{
                  text: "Less than $3000",
                  value: ["SaleAmount", "<", 3000]    // A filterExpression array
              }, 
              // ...
              ]
          }
      })
  });

  Angular

  TypeScript

  HTML

  import { DxDataGridModule } from "devextreme-angular";
  // ...
  export class AppComponent {
      headerFilterData: any;
      constructor () {
          this.headerFilterData = [{
              text: "Zero",    // A string to be displayed in the UI
              value: 0         // A single value  
          },{
              text: "Less than $3000",
              value: ["SaleAmount", "<", 3000]    // A filterExpression array
          }, 
          // ...
          ];
      }
  }
  @NgModule({
      imports: [
          // ...
          DxDataGridModule
      ],
      // ...
  })

  <dx-data-grid ...>
      <dxi-column>
          <dxo-header-filter [dataSource]="headerFilterData"></dxo-header-filter>
      </dxi-column>
  </dx-data-grid>

• DataSource Configuration Object
  A DataSource configuration object. Learn more about the DataSource and the DevExtreme Data Layer concept from the Data Layer topic.

  jQuery

  JavaScript

  $(function() {
      var now = new Date();
      var startOfWeek = new Date(now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay()==0?-6:1)));             
      var startOfDay = new Date(now.setHours(0,0,0,0));
      $("#dataGridContainer").dxDataGrid({
          // ...
          columns: [{
              // ...
              headerFilter: {
                  dataSource: {
                      load: function () {
                          return [{
                              text: 'Today',
                              value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]]
                          }, {
                              text: 'This week',
                              value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
                          }, {
                              text: 'Earlier',
                              value: ['OrderDate', '<', startOfWeek]
                          }];
                      }
                  }
              }
          },
          // ...
          ]
      });
  });

  Angular

  TypeScript

  HTML

  import { DxDataGridModule } from "devextreme-angular";
  import "devextreme/data/custom_store";
  // ...
  export class AppComponent {
      headerFilterData: any = {};
      constructor () {
          var now = new Date();
          var startOfWeek = new Date(now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay()==0?-6:1)));             
          var startOfDay = new Date(now.setHours(0,0,0,0));
          this.headerFilterData = {
              load: function () {
                  return [{
                      text: 'Today',
                      value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]]
                  }, {
                      text: 'This week',
                      value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
                  }, {
                      text: 'Earlier',
                      value: ['OrderDate', '<', startOfWeek]
                  }];
              }
          };
      }
  }
  @NgModule({
      imports: [
          // ...
          DxDataGridModule
      ],
      // ...
  })

  <dx-data-grid ...>
      <dxi-column>
          <dxo-header-filter [dataSource]="headerFilterData"></dxo-header-filter>
      </dxi-column>
  </dx-data-grid>

• Function
  A function in which you can modify the current data source configuration.

  jQuery

  JavaScript

  $(function () {
      $("#dataGridContainer").dxDataGrid({
          headerFilter: {
              dataSource: function (data) {
                  data.dataSource.postProcess = function (results) {
                      results.push({
                          text: "Weekends",
                          value: [
                              [getOrderDay, "=", 0],
                                  "or",
                              [getOrderDay, "=", 6]
                          ]
                      });
                      return results;
                  };
              }
          }
      })
  });

  Angular

  TypeScript

  HTML

  import { DxDataGridModule } from "devextreme-angular";
  import "devextreme/data/data_source";
  // ...
  export class AppComponent {
      headerFilterData: any;
      constructor () {
          this.headerFilterData = this.headerFilterData.bind(this);
      }
      headerFilterData(data) {
          data.dataSource.postProcess = (results) => {
              results.push({
                  text: "Weekends",
                  value: [
                      [this.getOrderDay, "=", 0], 
                          "or", 
                      [this.getOrderDay, "=", 6]
                  ]
              });
              return results;
          };
      }
  }
  @NgModule({
      imports: [
          // ...
          DxDataGridModule
      ],
      // ...
  })

  <dx-data-grid ...>
      <dxi-column>
          <dxo-header-filter [dataSource]="headerFilterData"></dxo-header-filter>
      </dxi-column>
  </dx-data-grid>

If you use a data source that does not contain the required fields (text and value), you can use the DataSource object's map option to cast the initial data array to the required structure. If the initial array includes key fields, all these fields, as well as the text and value fields should be present in the resulting array.

$(function(){
    var categoriesStore = new DevExpress.data.ArrayStore({
        data: [
            { categoryName: "...", categoryId: "1", categoryCode: "..." },
            // ...
        ],
        key: ["categoryId", "categoryCode"]
    });

    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            // ...
            headerFilter: {
                dataSource: new DevExpress.data.DataSource({
                    store: categoriesStore,
                    map: function (item) {
                        return {
                            text: item.categoryName,
                            value: item.categoryId,
                            categoryId: item.categoryId,
                            categoryCode: item.categoryCode
                        }
                    }
                })
            }
        },
        // ...
        ]
    });
});

import { DxDataGridModule } from "devextreme-angular";
import ArrayStore from "devextreme/data/array_store";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    headerFilterData: any = {};
    constructor () {
        let categoriesStore = new ArrayStore({
            data: [
                { categoryName: "...", categoryId: "1", categoryCode: "..." },
                // ...
            ],
            key: ["categoryId", "categoryCode"]
        });

        this.headerFilterData = new DataSource({
            store: categoriesStore,
            map: function (item) {
                return {
                    text: item.categoryName,
                    value: item.categoryId,
                    categoryId: item.categoryId,
                    categoryCode: item.categoryCode
                }
            }
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<dx-data-grid ...>
    <dxi-column>
        <dxo-header-filter [dataSource]="headerFilterData"></dxo-header-filter>
    </dxi-column>
</dx-data-grid>

For date columns, set this option to one of the string values. Groups in date columns are hierarchical, and the string value indicates up to which level the hierarchy is formed. The default level is "day", which means that each group has the following structure: "year" → "months" → "days".

For numeric columns, assign a number to this option. This number designates a step with which groups should be generated. Column values are classified into these groups.

Use the HeaderFilterGroupInterval enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Year, Quarter, Month, Day, Hour, Minute, and Second.

Use the CollectionSearchMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Contains, StartsWith, and Equals.