React TreeList - columns.headerFilter
allowSearch
dataSource
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
dataSource |
The header filter's data source. |
This option accepts one of the following values:
Array of Objects
A simple JavaScript array containing a collection of plain objects.jQuery
JavaScript$(function () { $("#treeListContainer").dxTreeList({ // ... columns: [{ // ... 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
TypeScriptHTMLimport { DxTreeListModule } 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: [ // ... DxTreeListModule ], // ... })
<dx-tree-list ...> <dxi-column> <dxo-header-filter [dataSource]="headerFilterData"></dxo-header-filter> </dxi-column> </dx-tree-list>
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)); $("#treeListContainer").dxTreeList({ // ... 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
TypeScriptHTMLimport { DxTreeListModule } 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: [ // ... DxTreeListModule ], // ... })
<dx-tree-list ...> <dxi-column> <dxo-header-filter [dataSource]="headerFilterData"></dxo-header-filter> </dxi-column> </dx-tree-list>
Function
A function in which you can modify the current data source configuration.jQuery
JavaScript$(function () { $("#treeListContainer").dxTreeList({ // ... columns: [{ // ... headerFilter: { dataSource: function (data) { data.dataSource.postProcess = function (results) { results.push({ text: "Weekends", value: [ [getOrderDay, "=", 0], "or", [getOrderDay, "=", 6] ] }); return results; }; } } }, // ... ] }) });
Angular
TypeScriptHTMLimport { DxTreeListModule } 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: [ // ... DxTreeListModule ], // ... })
<dx-tree-list ...> <dxi-column> <dxo-header-filter [dataSource]="headerFilterData"></dxo-header-filter> </dxi-column> </dx-tree-list>
If your data source omits the text and value fields, you can cast it to the required structure using the DataSource object's map function. If the initial data source contains key fields, the resulting data source should also contain them along with text and value.
jQuery
$(function(){ var categoriesStore = new DevExpress.data.ArrayStore({ data: [ { categoryName: "...", categoryId: "1", categoryCode: "..." }, // ... ], key: ["categoryId", "categoryCode"] }); $("#treeListContainer").dxTreeList({ // ... 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 } } }) } }, // ... ] }); });
Angular
import { DxTreeListModule } 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: [ // ... DxTreeListModule ], // ... })
<dx-tree-list ...> <dxi-column> <dxo-header-filter [dataSource]="headerFilterData"></dxo-header-filter> </dxi-column> </dx-tree-list>
groupInterval
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
.
searchMode
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
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.