Grids: Fix columns[].headerFilter.groupInterval Placeholders (#8853)

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
+
+    <!-- tab: index.js -->
+    $(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
+
+    <!-- tab: app.component.html -->
+    <dx-{widget-name} ... >
+        <dxi-{widget-name}-column ...
+            dataType="date"
+            [calculateFilterExpression]="calculateFilterExpression">
+            <dxo-{widget-name}-header-filter
+                [groupInterval]="null"
+            ></dxo-{widget-name}-header-filter>
+        </dxi-{widget-name}-column>
+    </dx-{widget-name}>
+
+    <!-- tab: app.component.ts -->
+    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);
+        }
+    }
+
+    <!-- tab: app.module.ts -->
+    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
+
+    <!-- tab: App.vue -->
+    <template>
+        <Dx{WidgetName} ... >
+            <DxColumn ...
+                data-type="date"
+                :calculate-filter-expression="calculateFilterExpression">
+                <DxHeaderFilter
+                    :group-interval="null"
+                />
+            </DxColumn>
+        </Dx{WidgetName}>
+    </template>
+
+    <script>
+    import 'devextreme/dist/css/dx.fluent.blue.light.css';
+
+    import { Dx{WidgetName}, DxColumn, DxHeaderFilter } from 'devextreme-vue/{widget-name}';
+
+    function calculateFilterExpression(value, operation, target) {
+        const column = this;
+
+        if(value && target === "headerFilter") {
+            return [column.dataField, operation, value];
+        }
+        return column.defaultCalculateFilterExpression.apply(column, arguments);
+    }
+    </script>
+
+##### React
+
+    <!-- tab: App.tsx -->
+    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} ... >
+                <Column ...
+                    dataType="date"
+                    calculateFilterExpression={calculateFilterExpression}>
+                    <HeaderFilter
+                        groupInterval={null}
+                    />
+                </Column>
+            </{WidgetName}>
+        );
+    }
+
+---

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
+
+    <!-- tab: index.js -->
+    $(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
+
+    <!-- tab: app.component.html -->
+    <dx-{widget-name} ... >
+        <dxi-{widget-name}-column ...
+            dataType="date"
+            [calculateFilterExpression]="calculateFilterExpression">
+            <dxo-{widget-name}-header-filter
+                [groupInterval]="null"
+            ></dxo-{widget-name}-header-filter>
+        </dxi-{widget-name}-column>
+    </dx-{widget-name}>
+
+    <!-- tab: app.component.ts -->
+    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);
+        }
+    }
+
+    <!-- tab: app.module.ts -->
+    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
+
+    <!-- tab: App.vue -->
+    <template>
+        <Dx{WidgetName} ... >
+            <DxColumn ...
+                data-type="date"
+                :calculate-filter-expression="calculateFilterExpression">
+                <DxHeaderFilter
+                    :group-interval="null"
+                />
+            </DxColumn>
+        </Dx{WidgetName}>
+    </template>
+
+    <script>
+    import 'devextreme/dist/css/dx.fluent.blue.light.css';
+
+    import { Dx{WidgetName}, DxColumn, DxHeaderFilter } from 'devextreme-vue/{widget-name}';
+
+    function calculateFilterExpression(value, operation, target) {
+        const column = this;
+
+        if(value && target === "headerFilter") {
+            return [column.dataField, operation, value];
+        }
+        return column.defaultCalculateFilterExpression.apply(column, arguments);
+    }
+    </script>
+
+##### React
+
+    <!-- tab: App.tsx -->
+    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} ... >
+                <Column ...
+                    dataType="date"
+                    calculateFilterExpression={calculateFilterExpression}>
+                    <HeaderFilter
+                        groupInterval={null}
+                    />
+                </Column>
+            </{WidgetName}>
+        );
+    }
+
+---

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
 
     <!-- tab: index.js -->
     $(function() {
-        $("#{widgetName}Container").dx{WidgetName}({
+        $("#dataGridContainer").dxDataGrid({
             // ...
             columns: [{
                 // ...
@@ -81,15 +81,15 @@ 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: [
             AppComponent
         ],
         imports: [
             BrowserModule,
-            Dx{WidgetName}Module
+            DxDataGridModule
         ],
         providers: [ ],
         bootstrap: [AppComponent]
@@ -100,21 +100,21 @@ The default header filter for date columns is hierarchical. To implement a non-h
 
     <!-- tab: App.vue -->
     <template>
-        <Dx{WidgetName} ... >
+        <DxDataGrid ... >
             <DxColumn ...
                 data-type="date"
                 :calculate-filter-expression="calculateFilterExpression">
                 <DxHeaderFilter
                     :group-interval="null"
                 />
             </DxColumn>
-        </Dx{WidgetName}>
+        </DxDataGrid>
     </template>
 
     <script>
     import 'devextreme/dist/css/dx.fluent.blue.light.css';
 
-    import { Dx{WidgetName}, DxColumn, DxHeaderFilter } from 'devextreme-vue/{widget-name}';
+    import { DxDataGrid, DxColumn, DxHeaderFilter } from 'devextreme-vue/{widget-name}';
 
     function calculateFilterExpression(value, operation, target) {
         const column = this;
@@ -132,7 +132,7 @@ The default header filter for date columns is hierarchical. To implement a non-h
     import React from 'react';
     import 'devextreme/dist/css/dx.fluent.blue.light.css';
 
-    import { {WidgetName}, Column, HeaderFilter } from 'devextreme-react/{widget-name}';
+    import { DataGrid, Column, HeaderFilter } from 'devextreme-react/{widget-name}';
 
     function calculateFilterExpression (value, operation, target) {
         if(value && target === "headerFilter") {
@@ -143,15 +143,15 @@ The default header filter for date columns is hierarchical. To implement a non-h
 
     export default function App() {
         return (
-            <{WidgetName} ... >
+            <DataGrid ... >
                 <Column ...
                     dataType="date"
                     calculateFilterExpression={calculateFilterExpression}>
                     <HeaderFilter
                         groupInterval={null}
                     />
                 </Column>
-            </{WidgetName}>
+            </DataGrid>
         );
     }