Skip to content

Commit 92ae3a1

Browse files
arman-boyakhchyanarman-boyakhchyan
authored
Grids: Fix columns[].headerFilter.groupInterval Placeholders (#8853) (#8860)
1 parent a05cdd5 commit 92ae3a1

3 files changed

Lines changed: 325 additions & 9 deletions

File tree

‎api-reference/10 UI Components/dxDataGrid/1 Configuration/columns/headerFilter/groupInterval.md‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
---
2+
id: dxDataGrid.Options.columns.headerFilter.groupInterval
3+
type: Enums.HeaderFilterGroupInterval | Number | undefined
4+
default: undefined
5+
---
6+
---
7+
##### shortDescription
8+
Specifies how the header filter combines values into groups.
9+
10+
---
11+
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/').
12+
13+
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:
14+
15+
#include common-demobutton-named with {
16+
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/",
17+
name: "DataGrid - Filtering"
18+
}
19+
20+
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.
21+
22+
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:
23+
24+
---
25+
##### jQuery
26+
27+
<!-- tab: index.js -->
28+
$(function() {
29+
$("#{widgetName}Container").dx{WidgetName}({
30+
// ...
31+
columns: [{
32+
// ...
33+
dataType: 'date',
34+
headerFilter: {
35+
groupInterval: null
36+
},
37+
calculateFilterExpression(value, operation, target) {
38+
if(value && target === "headerFilter") {
39+
return [this.dataField, operation, value];
40+
}
41+
return this.defaultCalculateFilterExpression.apply(this, arguments);
42+
}
43+
}]
44+
});
45+
});
46+
47+
##### Angular
48+
49+
<!-- tab: app.component.html -->
50+
<dx-{widget-name} ... >
51+
<dxi-{widget-name}-column ...
52+
dataType="date"
53+
[calculateFilterExpression]="calculateFilterExpression">
54+
<dxo-{widget-name}-header-filter
55+
[groupInterval]="null"
56+
></dxo-{widget-name}-header-filter>
57+
</dxi-{widget-name}-column>
58+
</dx-{widget-name}>
59+
60+
<!-- tab: app.component.ts -->
61+
import { Component } from '@angular/core';
62+
63+
@Component({
64+
selector: 'app-root',
65+
templateUrl: './app.component.html',
66+
styleUrls: ['./app.component.css']
67+
})
68+
export class AppComponent {
69+
calculateFilterExpression(value, operation, target) {
70+
const column = this as any;
71+
72+
if(value && target === "headerFilter") {
73+
return [column.dataField, operation, value];
74+
}
75+
return column.defaultCalculateFilterExpression.apply(column, arguments);
76+
}
77+
}
78+
79+
<!-- tab: app.module.ts -->
80+
import { BrowserModule } from '@angular/platform-browser';
81+
import { NgModule } from '@angular/core';
82+
import { AppComponent } from './app.component';
83+
84+
import { Dx{WidgetName}Module } from 'devextreme-angular';
85+
86+
@NgModule({
87+
declarations: [
88+
AppComponent
89+
],
90+
imports: [
91+
BrowserModule,
92+
Dx{WidgetName}Module
93+
],
94+
providers: [ ],
95+
bootstrap: [AppComponent]
96+
})
97+
export class AppModule { }
98+
99+
##### Vue
100+
101+
<!-- tab: App.vue -->
102+
<template>
103+
<Dx{WidgetName} ... >
104+
<DxColumn ...
105+
data-type="date"
106+
:calculate-filter-expression="calculateFilterExpression">
107+
<DxHeaderFilter
108+
:group-interval="null"
109+
/>
110+
</DxColumn>
111+
</Dx{WidgetName}>
112+
</template>
113+
114+
<script>
115+
import 'devextreme/dist/css/dx.fluent.blue.light.css';
116+
117+
import { Dx{WidgetName}, DxColumn, DxHeaderFilter } from 'devextreme-vue/{widget-name}';
118+
119+
function calculateFilterExpression(value, operation, target) {
120+
const column = this;
121+
122+
if(value && target === "headerFilter") {
123+
return [column.dataField, operation, value];
124+
}
125+
return column.defaultCalculateFilterExpression.apply(column, arguments);
126+
}
127+
</script>
128+
129+
##### React
130+
131+
<!-- tab: App.tsx -->
132+
import React from 'react';
133+
import 'devextreme/dist/css/dx.fluent.blue.light.css';
134+
135+
import { {WidgetName}, Column, HeaderFilter } from 'devextreme-react/{widget-name}';
136+
137+
function calculateFilterExpression (value, operation, target) {
138+
if(value && target === "headerFilter") {
139+
return [this.dataField, operation, value];
140+
}
141+
return this.defaultCalculateFilterExpression.apply(this, arguments);
142+
}
143+
144+
export default function App() {
145+
return (
146+
<{WidgetName} ... >
147+
<Column ...
148+
dataType="date"
149+
calculateFilterExpression={calculateFilterExpression}>
150+
<HeaderFilter
151+
groupInterval={null}
152+
/>
153+
</Column>
154+
</{WidgetName}>
155+
);
156+
}
157+
158+
---

‎api-reference/10 UI Components/dxTreeList/1 Configuration/columns/headerFilter/groupInterval.md‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
---
2+
id: dxTreeList.Options.columns.headerFilter.groupInterval
3+
type: Enums.HeaderFilterGroupInterval | Number | undefined
4+
default: undefined
5+
---
6+
---
7+
##### shortDescription
8+
Specifies how the header filter combines values into groups.
9+
10+
---
11+
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/').
12+
13+
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:
14+
15+
#include common-demobutton-named with {
16+
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/",
17+
name: "DataGrid - Filtering"
18+
}
19+
20+
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.
21+
22+
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:
23+
24+
---
25+
##### jQuery
26+
27+
<!-- tab: index.js -->
28+
$(function() {
29+
$("#{widgetName}Container").dx{WidgetName}({
30+
// ...
31+
columns: [{
32+
// ...
33+
dataType: 'date',
34+
headerFilter: {
35+
groupInterval: null
36+
},
37+
calculateFilterExpression(value, operation, target) {
38+
if(value && target === "headerFilter") {
39+
return [this.dataField, operation, value];
40+
}
41+
return this.defaultCalculateFilterExpression.apply(this, arguments);
42+
}
43+
}]
44+
});
45+
});
46+
47+
##### Angular
48+
49+
<!-- tab: app.component.html -->
50+
<dx-{widget-name} ... >
51+
<dxi-{widget-name}-column ...
52+
dataType="date"
53+
[calculateFilterExpression]="calculateFilterExpression">
54+
<dxo-{widget-name}-header-filter
55+
[groupInterval]="null"
56+
></dxo-{widget-name}-header-filter>
57+
</dxi-{widget-name}-column>
58+
</dx-{widget-name}>
59+
60+
<!-- tab: app.component.ts -->
61+
import { Component } from '@angular/core';
62+
63+
@Component({
64+
selector: 'app-root',
65+
templateUrl: './app.component.html',
66+
styleUrls: ['./app.component.css']
67+
})
68+
export class AppComponent {
69+
calculateFilterExpression(value, operation, target) {
70+
const column = this as any;
71+
72+
if(value && target === "headerFilter") {
73+
return [column.dataField, operation, value];
74+
}
75+
return column.defaultCalculateFilterExpression.apply(column, arguments);
76+
}
77+
}
78+
79+
<!-- tab: app.module.ts -->
80+
import { BrowserModule } from '@angular/platform-browser';
81+
import { NgModule } from '@angular/core';
82+
import { AppComponent } from './app.component';
83+
84+
import { Dx{WidgetName}Module } from 'devextreme-angular';
85+
86+
@NgModule({
87+
declarations: [
88+
AppComponent
89+
],
90+
imports: [
91+
BrowserModule,
92+
Dx{WidgetName}Module
93+
],
94+
providers: [ ],
95+
bootstrap: [AppComponent]
96+
})
97+
export class AppModule { }
98+
99+
##### Vue
100+
101+
<!-- tab: App.vue -->
102+
<template>
103+
<Dx{WidgetName} ... >
104+
<DxColumn ...
105+
data-type="date"
106+
:calculate-filter-expression="calculateFilterExpression">
107+
<DxHeaderFilter
108+
:group-interval="null"
109+
/>
110+
</DxColumn>
111+
</Dx{WidgetName}>
112+
</template>
113+
114+
<script>
115+
import 'devextreme/dist/css/dx.fluent.blue.light.css';
116+
117+
import { Dx{WidgetName}, DxColumn, DxHeaderFilter } from 'devextreme-vue/{widget-name}';
118+
119+
function calculateFilterExpression(value, operation, target) {
120+
const column = this;
121+
122+
if(value && target === "headerFilter") {
123+
return [column.dataField, operation, value];
124+
}
125+
return column.defaultCalculateFilterExpression.apply(column, arguments);
126+
}
127+
</script>
128+
129+
##### React
130+
131+
<!-- tab: App.tsx -->
132+
import React from 'react';
133+
import 'devextreme/dist/css/dx.fluent.blue.light.css';
134+
135+
import { {WidgetName}, Column, HeaderFilter } from 'devextreme-react/{widget-name}';
136+
137+
function calculateFilterExpression (value, operation, target) {
138+
if(value && target === "headerFilter") {
139+
return [this.dataField, operation, value];
140+
}
141+
return this.defaultCalculateFilterExpression.apply(this, arguments);
142+
}
143+
144+
export default function App() {
145+
return (
146+
<{WidgetName} ... >
147+
<Column ...
148+
dataType="date"
149+
calculateFilterExpression={calculateFilterExpression}>
150+
<HeaderFilter
151+
groupInterval={null}
152+
/>
153+
</Column>
154+
</{WidgetName}>
155+
);
156+
}
157+
158+
---

‎api-reference/40 Common Types/15 grids/ColumnHeaderFilter/groupInterval.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ The default header filter for date columns is hierarchical. To implement a non-h
2626

2727
<!-- tab: index.js -->
2828
$(function() {
29-
$("#{widgetName}Container").dx{WidgetName}({
29+
$("#dataGridContainer").dxDataGrid({
3030
// ...
3131
columns: [{
3232
// ...
@@ -81,15 +81,15 @@ The default header filter for date columns is hierarchical. To implement a non-h
8181
import { NgModule } from '@angular/core';
8282
import { AppComponent } from './app.component';
8383

84-
import { Dx{WidgetName}Module } from 'devextreme-angular';
84+
import { DxDataGridModule } from 'devextreme-angular';
8585

8686
@NgModule({
8787
declarations: [
8888
AppComponent
8989
],
9090
imports: [
9191
BrowserModule,
92-
Dx{WidgetName}Module
92+
DxDataGridModule
9393
],
9494
providers: [ ],
9595
bootstrap: [AppComponent]
@@ -100,21 +100,21 @@ The default header filter for date columns is hierarchical. To implement a non-h
100100

101101
<!-- tab: App.vue -->
102102
<template>
103-
<Dx{WidgetName} ... >
103+
<DxDataGrid ... >
104104
<DxColumn ...
105105
data-type="date"
106106
:calculate-filter-expression="calculateFilterExpression">
107107
<DxHeaderFilter
108108
:group-interval="null"
109109
/>
110110
</DxColumn>
111-
</Dx{WidgetName}>
111+
</DxDataGrid>
112112
</template>
113113

114114
<script>
115115
import 'devextreme/dist/css/dx.fluent.blue.light.css';
116116

117-
import { Dx{WidgetName}, DxColumn, DxHeaderFilter } from 'devextreme-vue/{widget-name}';
117+
import { DxDataGrid, DxColumn, DxHeaderFilter } from 'devextreme-vue/{widget-name}';
118118

119119
function calculateFilterExpression(value, operation, target) {
120120
const column = this;
@@ -132,7 +132,7 @@ The default header filter for date columns is hierarchical. To implement a non-h
132132
import React from 'react';
133133
import 'devextreme/dist/css/dx.fluent.blue.light.css';
134134

135-
import { {WidgetName}, Column, HeaderFilter } from 'devextreme-react/{widget-name}';
135+
import { DataGrid, Column, HeaderFilter } from 'devextreme-react/{widget-name}';
136136

137137
function calculateFilterExpression (value, operation, target) {
138138
if(value && target === "headerFilter") {
@@ -143,15 +143,15 @@ The default header filter for date columns is hierarchical. To implement a non-h
143143

144144
export default function App() {
145145
return (
146-
<{WidgetName} ... >
146+
<DataGrid ... >
147147
<Column ...
148148
dataType="date"
149149
calculateFilterExpression={calculateFilterExpression}>
150150
<HeaderFilter
151151
groupInterval={null}
152152
/>
153153
</Column>
154-
</{WidgetName}>
154+
</DataGrid>
155155
);
156156
}
157157

0 commit comments

Comments
 (0)