diff --git a/api-reference/10 UI Components/dxDataGrid/1 Configuration/columns/headerFilter/groupInterval.md b/api-reference/10 UI Components/dxDataGrid/1 Configuration/columns/headerFilter/groupInterval.md new file mode 100644 index 0000000000..69b446298d --- /dev/null +++ b/api-reference/10 UI Components/dxDataGrid/1 Configuration/columns/headerFilter/groupInterval.md @@ -0,0 +1,158 @@ +--- +id: dxDataGrid.Options.columns.headerFilter.groupInterval +type: Enums.HeaderFilterGroupInterval | Number | undefined +default: undefined +--- +--- +##### shortDescription +Specifies how the header filter combines values into groups. + +--- +If you [specify a custom header filter data source](/concepts/05%20UI%20Components/DataGrid/99%20How%20To/Customize%20Header%20Filter%20Data%20Source/10%20Specify%20a%20Custom%20Data%20Source.md '/Documentation/Guide/UI_Components/DataGrid/How_To/Customize_Header_Filter_Data_Source/#Specify_a_Custom_Data_Source'), **groupInterval** accepts only string arrays that contain group fields for [hierarchical header filters](/concepts/05%20UI%20Components/DataGrid/75%20Implement%20a%20Hierarchical%20Header%20Filter/00%20Implement%20a%20Hierarchical%20Header%20Filter.md '/Documentation/Guide/UI_Components/DataGrid/Implement_a_Hierarchical_Header_Filter/'). + +For numeric columns, assign a number that specifies the size of generated groups. For an example of this **groupInterval** implementation, refer to the following demo: + +#include common-demobutton-named with { + url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/", + name: "DataGrid - Filtering" +} + +For date columns, set this property to a [HeaderFilterGroupInterval](/api-reference/40%20Common%20Types/15%20grids/HeaderFilterGroupInterval.md '/Documentation/ApiReference/Common_Types/grids/#HeaderFilterGroupInterval') value. This value indicates the smallest available filter value. For instance, the *"day"* value allows you to filter date columns by a specific day. + +The default header filter for date columns is hierarchical. To implement a non-hierarchical header filter, set **groupInterval** to **null** and specify the [calculateFilterExpression](/api-reference/_hidden/GridBaseColumn/calculateFilterExpression.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#calculateFilterExpression') function: + +--- +##### jQuery + + + $(function() { + $("#{widgetName}Container").dx{WidgetName}({ + // ... + columns: [{ + // ... + dataType: 'date', + headerFilter: { + groupInterval: null + }, + calculateFilterExpression(value, operation, target) { + if(value && target === "headerFilter") { + return [this.dataField, operation, value]; + } + return this.defaultCalculateFilterExpression.apply(this, arguments); + } + }] + }); + }); + +##### Angular + + + + + + + + + + import { Component } from '@angular/core'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] + }) + export class AppComponent { + calculateFilterExpression(value, operation, target) { + const column = this as any; + + if(value && target === "headerFilter") { + return [column.dataField, operation, value]; + } + return column.defaultCalculateFilterExpression.apply(column, arguments); + } + } + + + import { BrowserModule } from '@angular/platform-browser'; + import { NgModule } from '@angular/core'; + import { AppComponent } from './app.component'; + + import { Dx{WidgetName}Module } from 'devextreme-angular'; + + @NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + Dx{WidgetName}Module + ], + providers: [ ], + bootstrap: [AppComponent] + }) + export class AppModule { } + +##### Vue + + + + + + +##### React + + + import React from 'react'; + import 'devextreme/dist/css/dx.fluent.blue.light.css'; + + import { {WidgetName}, Column, HeaderFilter } from 'devextreme-react/{widget-name}'; + + function calculateFilterExpression (value, operation, target) { + if(value && target === "headerFilter") { + return [this.dataField, operation, value]; + } + return this.defaultCalculateFilterExpression.apply(this, arguments); + } + + export default function App() { + return ( + <{WidgetName} ... > + + + + + ); + } + +--- diff --git a/api-reference/10 UI Components/dxTreeList/1 Configuration/columns/headerFilter/groupInterval.md b/api-reference/10 UI Components/dxTreeList/1 Configuration/columns/headerFilter/groupInterval.md new file mode 100644 index 0000000000..22aef62011 --- /dev/null +++ b/api-reference/10 UI Components/dxTreeList/1 Configuration/columns/headerFilter/groupInterval.md @@ -0,0 +1,158 @@ +--- +id: dxTreeList.Options.columns.headerFilter.groupInterval +type: Enums.HeaderFilterGroupInterval | Number | undefined +default: undefined +--- +--- +##### shortDescription +Specifies how the header filter combines values into groups. + +--- +If you [specify a custom header filter data source](/concepts/05%20UI%20Components/DataGrid/99%20How%20To/Customize%20Header%20Filter%20Data%20Source/10%20Specify%20a%20Custom%20Data%20Source.md '/Documentation/Guide/UI_Components/DataGrid/How_To/Customize_Header_Filter_Data_Source/#Specify_a_Custom_Data_Source'), **groupInterval** accepts only string arrays that contain group fields for [hierarchical header filters](/concepts/05%20UI%20Components/DataGrid/75%20Implement%20a%20Hierarchical%20Header%20Filter/00%20Implement%20a%20Hierarchical%20Header%20Filter.md '/Documentation/Guide/UI_Components/DataGrid/Implement_a_Hierarchical_Header_Filter/'). + +For numeric columns, assign a number that specifies the size of generated groups. For an example of this **groupInterval** implementation, refer to the following demo: + +#include common-demobutton-named with { + url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/", + name: "DataGrid - Filtering" +} + +For date columns, set this property to a [HeaderFilterGroupInterval](/api-reference/40%20Common%20Types/15%20grids/HeaderFilterGroupInterval.md '/Documentation/ApiReference/Common_Types/grids/#HeaderFilterGroupInterval') value. This value indicates the smallest available filter value. For instance, the *"day"* value allows you to filter date columns by a specific day. + +The default header filter for date columns is hierarchical. To implement a non-hierarchical header filter, set **groupInterval** to **null** and specify the [calculateFilterExpression](/api-reference/_hidden/GridBaseColumn/calculateFilterExpression.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#calculateFilterExpression') function: + +--- +##### jQuery + + + $(function() { + $("#{widgetName}Container").dx{WidgetName}({ + // ... + columns: [{ + // ... + dataType: 'date', + headerFilter: { + groupInterval: null + }, + calculateFilterExpression(value, operation, target) { + if(value && target === "headerFilter") { + return [this.dataField, operation, value]; + } + return this.defaultCalculateFilterExpression.apply(this, arguments); + } + }] + }); + }); + +##### Angular + + + + + + + + + + import { Component } from '@angular/core'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] + }) + export class AppComponent { + calculateFilterExpression(value, operation, target) { + const column = this as any; + + if(value && target === "headerFilter") { + return [column.dataField, operation, value]; + } + return column.defaultCalculateFilterExpression.apply(column, arguments); + } + } + + + import { BrowserModule } from '@angular/platform-browser'; + import { NgModule } from '@angular/core'; + import { AppComponent } from './app.component'; + + import { Dx{WidgetName}Module } from 'devextreme-angular'; + + @NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + Dx{WidgetName}Module + ], + providers: [ ], + bootstrap: [AppComponent] + }) + export class AppModule { } + +##### Vue + + + + + + +##### React + + + import React from 'react'; + import 'devextreme/dist/css/dx.fluent.blue.light.css'; + + import { {WidgetName}, Column, HeaderFilter } from 'devextreme-react/{widget-name}'; + + function calculateFilterExpression (value, operation, target) { + if(value && target === "headerFilter") { + return [this.dataField, operation, value]; + } + return this.defaultCalculateFilterExpression.apply(this, arguments); + } + + export default function App() { + return ( + <{WidgetName} ... > + + + + + ); + } + +--- diff --git a/api-reference/40 Common Types/15 grids/ColumnHeaderFilter/groupInterval.md b/api-reference/40 Common Types/15 grids/ColumnHeaderFilter/groupInterval.md index de39b15790..341d902edf 100644 --- a/api-reference/40 Common Types/15 grids/ColumnHeaderFilter/groupInterval.md +++ b/api-reference/40 Common Types/15 grids/ColumnHeaderFilter/groupInterval.md @@ -26,7 +26,7 @@ The default header filter for date columns is hierarchical. To implement a non-h $(function() { - $("#{widgetName}Container").dx{WidgetName}({ + $("#dataGridContainer").dxDataGrid({ // ... columns: [{ // ... @@ -81,7 +81,7 @@ The default header filter for date columns is hierarchical. To implement a non-h import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; - import { Dx{WidgetName}Module } from 'devextreme-angular'; + import { DxDataGridModule } from 'devextreme-angular'; @NgModule({ declarations: [ @@ -89,7 +89,7 @@ The default header filter for date columns is hierarchical. To implement a non-h ], imports: [ BrowserModule, - Dx{WidgetName}Module + DxDataGridModule ], providers: [ ], bootstrap: [AppComponent] @@ -100,7 +100,7 @@ The default header filter for date columns is hierarchical. To implement a non-h