From 4fdcfdcdceab257cebec6fd9f5ae18eb64374602 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 30 Jun 2026 14:21:02 +0400 Subject: [PATCH 1/5] Grids: Add cellTemplate Hint Info & Updates --- .../1 Configuration/cellHintEnabled.md | 11 ++++- .../_hidden/dxDataGridColumn/cellTemplate.md | 2 + .../_hidden/dxTreeListColumn/cellTemplate.md | 42 +++++++++++++++++-- 3 files changed, 50 insertions(+), 5 deletions(-) diff --git a/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md b/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md index 1293c6be5f..35b8ce966f 100644 --- a/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md +++ b/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md @@ -5,7 +5,14 @@ default: true --- --- ##### shortDescription -Enables a hint that appears when a user hovers the mouse pointer over a cell with truncated content. +Enables hints that appear when users hover over truncated cells. --- -The cell's content may be truncated if the [width](/api-reference/_hidden/GridBaseColumn/width.md '{basewidgetpath}/Configuration/columns/#width') of the cell's column becomes very small. In this case, when a user hovers the mouse pointer over such a cell, a hint containing the cell's value appears. To disable cell hints, assign **false** to the **cellHintEnabled** property. \ No newline at end of file +When **cellHintEnabled** is `true`, {WidgetName} adds the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) element attribute to truncated cells to display native (browser-specific) hints. + +[note] This property has no effect for columns where [cellTemplate]({basewidgetpath}/Configuration/columns/#cellTemplate) is configured. To display native hints in these colums, add the **title** attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. + +#####See Also##### + +- **columns[]**.[width](/api-reference/_hidden/GridBaseColumn/width.md '{basewidgetpath}/Configuration/columns/#width') +- [columnAutoWidth]({basewidgetpath}/Configuration/#columnAutoWidth) \ No newline at end of file diff --git a/api-reference/_hidden/dxDataGridColumn/cellTemplate.md b/api-reference/_hidden/dxDataGridColumn/cellTemplate.md index 417cb2e58a..6afaf420ef 100644 --- a/api-reference/_hidden/dxDataGridColumn/cellTemplate.md +++ b/api-reference/_hidden/dxDataGridColumn/cellTemplate.md @@ -75,6 +75,8 @@ The following details should be taken into account when you use a **cellTemplate - Template values have no effect on data operations. Implement the column's [calculateCellValue](/api-reference/_hidden/GridBaseColumn/calculateCellValue.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#calculateCellValue') or [calculateDisplayValue](/api-reference/_hidden/GridBaseColumn/calculateDisplayValue.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#calculateDisplayValue') option to transform the cell's underlying value. +- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these colums, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. + --- ##### jQuery diff --git a/api-reference/_hidden/dxTreeListColumn/cellTemplate.md b/api-reference/_hidden/dxTreeListColumn/cellTemplate.md index 7428b4068a..40d9677884 100644 --- a/api-reference/_hidden/dxTreeListColumn/cellTemplate.md +++ b/api-reference/_hidden/dxTreeListColumn/cellTemplate.md @@ -60,7 +60,45 @@ A function called when this variable changes. A template name or container. --- -[note]If you implement two-way data binding in your template, make sure that you have switched off the built-in implementation of this feature by setting the [twoWayBindingEnabled](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/twoWayBindingEnabled.md '{basewidgetpath}/Configuration/#twoWayBindingEnabled') property to **false**. +The following details should be taken into account when you use a **cellTemplate**: + +- If you implement two-way data binding in your template, set [twoWayBindingEnabled](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/twoWayBindingEnabled.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#twoWayBindingEnabled') to **false** to switch off the built-in implementation of this feature. + +- In [fixed columns](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing '{basewidgetpath}/Configuration/columnFixing/'), the template is initialized and rendered twice for each cell. + +- Template values have no effect on data operations. Implement the column's [calculateCellValue](/api-reference/_hidden/GridBaseColumn/calculateCellValue.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#calculateCellValue') or [calculateDisplayValue](/api-reference/_hidden/GridBaseColumn/calculateDisplayValue.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#calculateDisplayValue') option to transform the cell's underlying value. + +- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these colums, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. + +--- +##### jQuery + +The code snippet below uses the `watch` function. You can test the snippet in the [Real-Time Updates](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/RealTimeUpdates/) demo. + +Note the following: + +- You cannot call `watch` in a cell in which you want to track data. +- The data in the cell where `watch` is called should remain constant. + + + + + $("#treeListContainer").dxTreeList({ + columns: [{ + dataField: 'ProductName', + dataType: 'string', + cellTemplate(container, info) { + const getter = (data) => data.Amount; + const handler = (newValue) => { + container.css('background-color', newValue < 100000 ? 'red' : 'green'); + }; + info.watch(getter, handler); + return $('
').text(info.data.ProductName); + } + }] + }); + +--- #include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/Overview/" @@ -70,5 +108,3 @@ A template name or container. - [Customize Cells Appearance](/concepts/05%20UI%20Components/TreeList/10%20Columns/40%20Customize%20Cells/2%20Customize%20the%20Appearance.md '/Documentation/Guide/UI_Components/TreeList/Columns/Customize_Cells/#Customize_the_Appearance') - [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') - [onCellPrepared](/api-reference/10%20UI%20Components/dxTreeList/1%20Configuration/onCellPrepared.md '{basewidgetpath}/Configuration/#onCellPrepared') - - \ No newline at end of file From f02e68528bcb12903aae5f759739c334ceb612c3 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 30 Jun 2026 15:17:28 +0400 Subject: [PATCH 2/5] Remove Outdated Info & Add Typo Fixes --- .../GridBase/1 Configuration/cellHintEnabled.md | 2 +- api-reference/_hidden/dxDataGridColumn/cellTemplate.md | 4 +--- api-reference/_hidden/dxTreeListColumn/cellTemplate.md | 4 +--- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md b/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md index 35b8ce966f..3327e9656a 100644 --- a/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md +++ b/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md @@ -10,7 +10,7 @@ Enables hints that appear when users hover over truncated cells. --- When **cellHintEnabled** is `true`, {WidgetName} adds the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) element attribute to truncated cells to display native (browser-specific) hints. -[note] This property has no effect for columns where [cellTemplate]({basewidgetpath}/Configuration/columns/#cellTemplate) is configured. To display native hints in these colums, add the **title** attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. +[note] This property has no effect for columns where [cellTemplate]({basewidgetpath}/Configuration/columns/#cellTemplate) is configured. To display native hints in these columns, add the **title** attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. #####See Also##### diff --git a/api-reference/_hidden/dxDataGridColumn/cellTemplate.md b/api-reference/_hidden/dxDataGridColumn/cellTemplate.md index 6afaf420ef..d15c803aef 100644 --- a/api-reference/_hidden/dxDataGridColumn/cellTemplate.md +++ b/api-reference/_hidden/dxDataGridColumn/cellTemplate.md @@ -71,11 +71,9 @@ The following details should be taken into account when you use a **cellTemplate - If you implement two-way data binding in your template, set [twoWayBindingEnabled](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/twoWayBindingEnabled.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#twoWayBindingEnabled') to **false** to switch off the built-in implementation of this feature. -- In [fixed columns](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing '{basewidgetpath}/Configuration/columnFixing/'), the template is initialized and rendered twice for each cell. - - Template values have no effect on data operations. Implement the column's [calculateCellValue](/api-reference/_hidden/GridBaseColumn/calculateCellValue.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#calculateCellValue') or [calculateDisplayValue](/api-reference/_hidden/GridBaseColumn/calculateDisplayValue.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#calculateDisplayValue') option to transform the cell's underlying value. -- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these colums, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. +- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these columns, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. --- ##### jQuery diff --git a/api-reference/_hidden/dxTreeListColumn/cellTemplate.md b/api-reference/_hidden/dxTreeListColumn/cellTemplate.md index 40d9677884..58c46eb70f 100644 --- a/api-reference/_hidden/dxTreeListColumn/cellTemplate.md +++ b/api-reference/_hidden/dxTreeListColumn/cellTemplate.md @@ -64,11 +64,9 @@ The following details should be taken into account when you use a **cellTemplate - If you implement two-way data binding in your template, set [twoWayBindingEnabled](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/twoWayBindingEnabled.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#twoWayBindingEnabled') to **false** to switch off the built-in implementation of this feature. -- In [fixed columns](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing '{basewidgetpath}/Configuration/columnFixing/'), the template is initialized and rendered twice for each cell. - - Template values have no effect on data operations. Implement the column's [calculateCellValue](/api-reference/_hidden/GridBaseColumn/calculateCellValue.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#calculateCellValue') or [calculateDisplayValue](/api-reference/_hidden/GridBaseColumn/calculateDisplayValue.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#calculateDisplayValue') option to transform the cell's underlying value. -- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these colums, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. +- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these columns, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. --- ##### jQuery From b1339a669ec37f6881b4c4454109d408ed38cbe6 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 21 Jul 2026 16:52:33 +0400 Subject: [PATCH 3/5] Add Renormalize --- .../05 Bind the DataGrid to Data.md | 2 +- .../0 Customize Columns.md | 42 +-- .../10 Customize Columns/3 Reorder Columns.md | 2 +- .../20 Sort Data.md | 170 ++++----- .../50 Select Records.md | 322 +++++++++--------- .../60 Display Summaries.md | 2 +- .../70 Configure Master-Detail Interface.md | 232 ++++++------- 7 files changed, 386 insertions(+), 386 deletions(-) diff --git a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/05 Bind the DataGrid to Data.md b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/05 Bind the DataGrid to Data.md index ee6f41700d..e1b401ae10 100644 --- a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/05 Bind the DataGrid to Data.md +++ b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/05 Bind the DataGrid to Data.md @@ -1,6 +1,6 @@ DataGrid can load and update data from different data source types. To use a local array, assign the array to [dataSource](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/dataSource.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#dataSource') and specify the key field in [keyExpr](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/keyExpr.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#keyExpr'). -The following code snippet initializes a DataGrid and creates columns for all data fields. All columns are equal width, and the column order follows the data source structure. +The following code snippet initializes a DataGrid and creates columns for all data fields. All columns are equal width, and the column order follows the data source structure. --- ##### jQuery diff --git a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/0 Customize Columns.md b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/0 Customize Columns.md index 5ed45520e6..1149e2388b 100644 --- a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/0 Customize Columns.md +++ b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/0 Customize Columns.md @@ -1,21 +1,21 @@ -#include common-tutorialbutton-named with { url: "/Documentation/Guide/UI_Components/DataGrid/Columns/Overview/", name: "Columns - Overview" } - ---- - -##### jQuery - -Use the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. Configure columns as objects to specify options. To add columns with default options, add [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') values to **columns[]** as strings. - -##### Angular - -Specify the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. Specify each column's [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') value. - -##### Vue - -Specify the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. To add a column, specify the [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') value. - -##### React - -Specify the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. To add a column, specify the [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') value. - ---- +#include common-tutorialbutton-named with { url: "/Documentation/Guide/UI_Components/DataGrid/Columns/Overview/", name: "Columns - Overview" } + +--- + +##### jQuery + +Use the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. Configure columns as objects to specify options. To add columns with default options, add [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') values to **columns[]** as strings. + +##### Angular + +Specify the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. Specify each column's [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') value. + +##### Vue + +Specify the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. To add a column, specify the [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') value. + +##### React + +Specify the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. To add a column, specify the [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') value. + +--- diff --git a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/3 Reorder Columns.md b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/3 Reorder Columns.md index a82c20c3b2..125fe81041 100644 --- a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/3 Reorder Columns.md +++ b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/3 Reorder Columns.md @@ -1,6 +1,6 @@ #include common-tutorialbutton-named with { url: "/Documentation/Guide/UI_Components/DataGrid/Columns/Column_Reordering/", name: "Column Reordering" } -To set the initial column order, arrange items in the [columns[]](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array as needed. Enable [allowColumnReordering](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/allowColumnReordering.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering') to allow users to reorder columns in the component UI. +To set the initial column order, arrange items in the [columns[]](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array as needed. Enable [allowColumnReordering](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/allowColumnReordering.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering') to allow users to reorder columns in the component UI. The following code snippet also specifies [dataType](/api-reference/_hidden/GridBaseColumn/dataType.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataType') for `BirthDate` and `HireDate` columns to display string values as dates: diff --git a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/20 Sort Data.md b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/20 Sort Data.md index e34258475d..5ce9dce7be 100644 --- a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/20 Sort Data.md +++ b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/20 Sort Data.md @@ -1,85 +1,85 @@ -#include common-tutorialbutton-named with { url: "/Documentation/Guide/UI_Components/DataGrid/Sorting/", name: "DataGrid - Sorting" } - -The **sorting**.[mode](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/sorting/mode.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/sorting/#mode') property specifies whether users can sort grid records against single or multiple columns. - -You can also set a column's [sortOrder](/api-reference/_hidden/GridBaseColumn/sortOrder.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#sortOrder') and [sortIndex](/api-reference/_hidden/GridBaseColumn/sortIndex.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#sortIndex') properties to specify initial sorting settings. [sortIndex](/api-reference/_hidden/GridBaseColumn/sortIndex.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#sortIndex') applies only in multi-column sort mode. - -To sort data and change sort orders in the UI, click column headers. Hold **Shift** and click to sort data against multiple columns. - ---- -##### jQuery - - - $("#dataGrid").dxDataGrid({ - sorting: { mode: "multiple" }, - columns: [{ - dataField: "Country", - sortOrder: "asc", - }, /* ... */ ], - // ... - }); - -##### ASP.NET Core Controls - - - @(Html.DevExtreme().DataGrid() - .Sorting(s => s.Mode(GridSortingMode.Multiple)) - .Columns(columns => { - columns.AddFor(m => m.Country) - .SortOrder(SortOrder.Asc); - }) - @* ... *@ - ) - -##### Angular - - - - - - - - -##### Vue - - - - - - -##### React - - - import { DataGrid, Sorting, Column } from 'devextreme-react/data-grid'; - - function App() { - return ( -
- - - - {/* ... */} - -
- ); - } - ---- +#include common-tutorialbutton-named with { url: "/Documentation/Guide/UI_Components/DataGrid/Sorting/", name: "DataGrid - Sorting" } + +The **sorting**.[mode](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/sorting/mode.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/sorting/#mode') property specifies whether users can sort grid records against single or multiple columns. + +You can also set a column's [sortOrder](/api-reference/_hidden/GridBaseColumn/sortOrder.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#sortOrder') and [sortIndex](/api-reference/_hidden/GridBaseColumn/sortIndex.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#sortIndex') properties to specify initial sorting settings. [sortIndex](/api-reference/_hidden/GridBaseColumn/sortIndex.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#sortIndex') applies only in multi-column sort mode. + +To sort data and change sort orders in the UI, click column headers. Hold **Shift** and click to sort data against multiple columns. + +--- +##### jQuery + + + $("#dataGrid").dxDataGrid({ + sorting: { mode: "multiple" }, + columns: [{ + dataField: "Country", + sortOrder: "asc", + }, /* ... */ ], + // ... + }); + +##### ASP.NET Core Controls + + + @(Html.DevExtreme().DataGrid() + .Sorting(s => s.Mode(GridSortingMode.Multiple)) + .Columns(columns => { + columns.AddFor(m => m.Country) + .SortOrder(SortOrder.Asc); + }) + @* ... *@ + ) + +##### Angular + + + + + + + + +##### Vue + + + + + + +##### React + + + import { DataGrid, Sorting, Column } from 'devextreme-react/data-grid'; + + function App() { + return ( +
+ + + + {/* ... */} + +
+ ); + } + +--- diff --git a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/50 Select Records.md b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/50 Select Records.md index 23e654e351..6d210a3052 100644 --- a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/50 Select Records.md +++ b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/50 Select Records.md @@ -1,161 +1,161 @@ -#include common-tutorialbutton-named with { url: "/Documentation/Guide/UI_Components/DataGrid/Selection/", name: "DataGrid - Selection" } - -DataGrid supports single- and multiple-row selection. To enable row selection, configure the **selection**.[mode](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/selection/mode.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#mode') property. - -Handle [onSelectionChanged](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/onSelectionChanged.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onSelectionChanged') to obtain selected records at runtime. This tutorial uses **onSelectionChanged** to display selected employee names in an element outside the component: - ---- -##### jQuery - - - $("#dataGrid").dxDataGrid({ - selection: { mode: "single" }, - onSelectionChanged: function(e) { - e.component.byKey(e.currentSelectedRowKeys[0]).done(employee => { - if(employee) { - $("#selected-employee").text(`Selected employee: ${employee.FullName}`); - } - }); - }, - // ... - }); - - - - - -
-
-

-
- - - -##### ASP.NET Core Controls - - -
- @(Html.DevExtreme().DataGrid() - .Selection(s => s.Mode(SelectionMode.Single)) - .OnSelectionChanged("handleSelectionChanged") - @* ... *@ - ) -

-
- - - -##### Angular - - -
- - - - - @if (selectedEmployee) { -

- Selected employee: {{ selectedEmployee.FullName }} -

- } -
- - - import { Component } from '@angular/core'; - import { DxDataGridTypes } from 'devextreme-angular/ui/data-grid'; - import { Employee, EmployeesService } from './employees.service'; - - // ... - export class AppComponent { - selectedEmployee: Employee; - - constructor(service: EmployeesService) { - this.selectEmployee = this.selectEmployee.bind(this); - } - - selectEmployee(e: DxDataGridTypes.SelectionChangedEvent) { - e.component.byKey(e.currentSelectedRowKeys[0]).done(employee => { - if(employee) { - this.selectedEmployee = employee; - } - }); - } - } - -##### Vue - - - - - - -##### React - - - import React, { useCallback, useState } from 'react'; - import { DataGrid, Selection, type DataGridTypes } from 'devextreme-react/data-grid'; - import { type Employee } from './employees'; - - function SelectedEmployee(props) { - if(props.employee) { - return ( -

- Selected employee: {props.employee.FullName} -

- ); - } - return null; - } - - function App() { - const [selectedEmployee, setSelectedEmployee] = useState(); - const selectEmployee = useCallback((e: DataGridTypes.SelectionChangedEvent): void => { - e.component.byKey(e.currentSelectedRowKeys[0]).then((employee: Employee) => { - setSelectedEmployee(employee); - }).catch(() => {}); - }, []); - - return ( -
- - - {/* ... */} - - -
- ); - } - ---- +#include common-tutorialbutton-named with { url: "/Documentation/Guide/UI_Components/DataGrid/Selection/", name: "DataGrid - Selection" } + +DataGrid supports single- and multiple-row selection. To enable row selection, configure the **selection**.[mode](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/selection/mode.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#mode') property. + +Handle [onSelectionChanged](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/onSelectionChanged.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onSelectionChanged') to obtain selected records at runtime. This tutorial uses **onSelectionChanged** to display selected employee names in an element outside the component: + +--- +##### jQuery + + + $("#dataGrid").dxDataGrid({ + selection: { mode: "single" }, + onSelectionChanged: function(e) { + e.component.byKey(e.currentSelectedRowKeys[0]).done(employee => { + if(employee) { + $("#selected-employee").text(`Selected employee: ${employee.FullName}`); + } + }); + }, + // ... + }); + + + + + +
+
+

+
+ + + +##### ASP.NET Core Controls + + +
+ @(Html.DevExtreme().DataGrid() + .Selection(s => s.Mode(SelectionMode.Single)) + .OnSelectionChanged("handleSelectionChanged") + @* ... *@ + ) +

+
+ + + +##### Angular + + +
+ + + + + @if (selectedEmployee) { +

+ Selected employee: {{ selectedEmployee.FullName }} +

+ } +
+ + + import { Component } from '@angular/core'; + import { DxDataGridTypes } from 'devextreme-angular/ui/data-grid'; + import { Employee, EmployeesService } from './employees.service'; + + // ... + export class AppComponent { + selectedEmployee: Employee; + + constructor(service: EmployeesService) { + this.selectEmployee = this.selectEmployee.bind(this); + } + + selectEmployee(e: DxDataGridTypes.SelectionChangedEvent) { + e.component.byKey(e.currentSelectedRowKeys[0]).done(employee => { + if(employee) { + this.selectedEmployee = employee; + } + }); + } + } + +##### Vue + + + + + + +##### React + + + import React, { useCallback, useState } from 'react'; + import { DataGrid, Selection, type DataGridTypes } from 'devextreme-react/data-grid'; + import { type Employee } from './employees'; + + function SelectedEmployee(props) { + if(props.employee) { + return ( +

+ Selected employee: {props.employee.FullName} +

+ ); + } + return null; + } + + function App() { + const [selectedEmployee, setSelectedEmployee] = useState(); + const selectEmployee = useCallback((e: DataGridTypes.SelectionChangedEvent): void => { + e.component.byKey(e.currentSelectedRowKeys[0]).then((employee: Employee) => { + setSelectedEmployee(employee); + }).catch(() => {}); + }, []); + + return ( +
+ + + {/* ... */} + + +
+ ); + } + +--- diff --git a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/60 Display Summaries.md b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/60 Display Summaries.md index 31e97c070f..d30c6c18dd 100644 --- a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/60 Display Summaries.md +++ b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/60 Display Summaries.md @@ -6,7 +6,7 @@ DataGrid supports two types of data summaries: - **Total summaries**: Calculated against all grid records. Configured in the [totalItems](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/summary/totalItems '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/summary/totalItems/') array. - **Group summaries**: Calculated for each data group. Configured in the [groupItems](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/summary/groupItems '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/summary/groupItems/') array. -Each summary item applies an aggregate function specified in [summaryType](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/summary/totalItems/summaryType.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/summary/totalItems/#summaryType') to display summarized values. You can use [predefined aggregate functions](/concepts/05%20UI%20Components/DataGrid/65%20Summaries/05%20Predefined%20Aggregate%20Functions.md '/Documentation/Guide/UI_Components/DataGrid/Summaries/Predefined_Aggregate_Functions/') (such as *"sum"*, *"avg"*, and *"count"*) or define a [custom aggregate function](/concepts/05%20UI%20Components/DataGrid/65%20Summaries/07%20Custom%20Aggregate%20Function '/Documentation/Guide/UI_Components/DataGrid/Summaries/Custom_Aggregate_Function/'). This tutorial displays a *"count"* group summary: +Each summary item applies an aggregate function specified in [summaryType](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/summary/totalItems/summaryType.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/summary/totalItems/#summaryType') to display summarized values. You can use [predefined aggregate functions](/concepts/05%20UI%20Components/DataGrid/65%20Summaries/05%20Predefined%20Aggregate%20Functions.md '/Documentation/Guide/UI_Components/DataGrid/Summaries/Predefined_Aggregate_Functions/') (such as *"sum"*, *"avg"*, and *"count"*) or define a [custom aggregate function](/concepts/05%20UI%20Components/DataGrid/65%20Summaries/07%20Custom%20Aggregate%20Function '/Documentation/Guide/UI_Components/DataGrid/Summaries/Custom_Aggregate_Function/'). This tutorial displays a *"count"* group summary: --- ##### jQuery diff --git a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/70 Configure Master-Detail Interface.md b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/70 Configure Master-Detail Interface.md index 8a951057b9..2123622003 100644 --- a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/70 Configure Master-Detail Interface.md +++ b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/70 Configure Master-Detail Interface.md @@ -1,116 +1,116 @@ -#include common-tutorialbutton-named with { url: "/Documentation/Guide/UI_Components/DataGrid/Master-Detail_Interface/", name: "DataGrid - Master-Detail Interface" } - -DataGrid supports master-detail data presentation. You can display detail data in expandable sections below master rows. To configure master-detail mode, set **masterDetail**.[enabled](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/masterDetail/enabled.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/masterDetail/#enabled') to **true** and specify a [template](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/masterDetail/template.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/masterDetail/#template'). This tutorial configures a template that displays employee images from file paths stored in the component data source: - ---- -##### jQuery - - - $("#dataGrid").dxDataGrid({ - masterDetail: { - enabled: true, - template: function (_, options) { - const employee = options.data; - const photo = $("") - .addClass("employee-photo") - .attr("src", employee.Photo); - const notes = $("

") - .addClass("employee-notes") - .text(employee.Notes); - return $("

").append(photo, notes); - } - }, - // ... - }); - -##### ASP.NET Core Controls - - - @(Html.DevExtreme().DataGrid() - .MasterDetail(m => m - .Enabled(true) - .Template(new JS ("masterDetailTemplate")) - ) - @* ... *@ - ) - - - -##### Angular - - - - - -
- -

{{ employee.data.Notes }}

-
- - - -##### Vue - - - - - - -##### React - - - import { DataGrid, MasterDetail } from 'devextreme-react/data-grid'; - - function DetailSection(props) { - const employee = props.data.data; - return ( -
- {employee.FullName} -

{employee.Notes}

-
- ); - } - - function App() { - return ( - - - {/* ... */} - - ); - } - ---- +#include common-tutorialbutton-named with { url: "/Documentation/Guide/UI_Components/DataGrid/Master-Detail_Interface/", name: "DataGrid - Master-Detail Interface" } + +DataGrid supports master-detail data presentation. You can display detail data in expandable sections below master rows. To configure master-detail mode, set **masterDetail**.[enabled](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/masterDetail/enabled.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/masterDetail/#enabled') to **true** and specify a [template](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/masterDetail/template.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/masterDetail/#template'). This tutorial configures a template that displays employee images from file paths stored in the component data source: + +--- +##### jQuery + + + $("#dataGrid").dxDataGrid({ + masterDetail: { + enabled: true, + template: function (_, options) { + const employee = options.data; + const photo = $("") + .addClass("employee-photo") + .attr("src", employee.Photo); + const notes = $("

") + .addClass("employee-notes") + .text(employee.Notes); + return $("

").append(photo, notes); + } + }, + // ... + }); + +##### ASP.NET Core Controls + + + @(Html.DevExtreme().DataGrid() + .MasterDetail(m => m + .Enabled(true) + .Template(new JS ("masterDetailTemplate")) + ) + @* ... *@ + ) + + + +##### Angular + + + + + +
+ +

{{ employee.data.Notes }}

+
+ + + +##### Vue + + + + + + +##### React + + + import { DataGrid, MasterDetail } from 'devextreme-react/data-grid'; + + function DetailSection(props) { + const employee = props.data.data; + return ( +
+ {employee.FullName} +

{employee.Notes}

+
+ ); + } + + function App() { + return ( + + + {/* ... */} + + ); + } + +--- From 6ea495e5b92b915ca729b4bba6c6427e42d7711c Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 21 Jul 2026 17:08:43 +0400 Subject: [PATCH 4/5] Add Guide Links --- .../GridBase/1 Configuration/cellHintEnabled.md | 3 ++- api-reference/_hidden/dxDataGridColumn/cellTemplate.md | 2 +- api-reference/_hidden/dxTreeListColumn/cellTemplate.md | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md b/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md index 3327e9656a..cca3a784b8 100644 --- a/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md +++ b/api-reference/10 UI Components/GridBase/1 Configuration/cellHintEnabled.md @@ -15,4 +15,5 @@ When **cellHintEnabled** is `true`, {WidgetName} adds the [title](https://develo #####See Also##### - **columns[]**.[width](/api-reference/_hidden/GridBaseColumn/width.md '{basewidgetpath}/Configuration/columns/#width') -- [columnAutoWidth]({basewidgetpath}/Configuration/#columnAutoWidth) \ No newline at end of file +- [columnAutoWidth]({basewidgetpath}/Configuration/#columnAutoWidth) +- [Customize Cells - Add Tooltips to Cells](/Documentation/Guide/UI_Components/{WidgetName}/Columns/Customize_Cells/#Add_Tooltips_to_Cells) \ No newline at end of file diff --git a/api-reference/_hidden/dxDataGridColumn/cellTemplate.md b/api-reference/_hidden/dxDataGridColumn/cellTemplate.md index d15c803aef..5c38ebb229 100644 --- a/api-reference/_hidden/dxDataGridColumn/cellTemplate.md +++ b/api-reference/_hidden/dxDataGridColumn/cellTemplate.md @@ -73,7 +73,7 @@ The following details should be taken into account when you use a **cellTemplate - Template values have no effect on data operations. Implement the column's [calculateCellValue](/api-reference/_hidden/GridBaseColumn/calculateCellValue.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#calculateCellValue') or [calculateDisplayValue](/api-reference/_hidden/GridBaseColumn/calculateDisplayValue.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#calculateDisplayValue') option to transform the cell's underlying value. -- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these columns, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. +- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these columns, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. Refer to the following topic for more information: [Customize Cells - Add Tooltips to Cells](/Documentation/Guide/UI_Components/DataGrid/Columns/Customize_Cells/#Add_Tooltips_to_Cells). --- ##### jQuery diff --git a/api-reference/_hidden/dxTreeListColumn/cellTemplate.md b/api-reference/_hidden/dxTreeListColumn/cellTemplate.md index 58c46eb70f..9f4d6eae7a 100644 --- a/api-reference/_hidden/dxTreeListColumn/cellTemplate.md +++ b/api-reference/_hidden/dxTreeListColumn/cellTemplate.md @@ -66,7 +66,7 @@ The following details should be taken into account when you use a **cellTemplate - Template values have no effect on data operations. Implement the column's [calculateCellValue](/api-reference/_hidden/GridBaseColumn/calculateCellValue.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#calculateCellValue') or [calculateDisplayValue](/api-reference/_hidden/GridBaseColumn/calculateDisplayValue.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#calculateDisplayValue') option to transform the cell's underlying value. -- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these columns, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. +- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these columns, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. Refer to the following topic for more information: [Customize Cells - Add Tooltips to Cells](/Documentation/Guide/UI_Components/TreeList/Columns/Customize_Cells/#Add_Tooltips_to_Cells). --- ##### jQuery From 206d0af58a0205a77bbc3c8681c0dd2d16c9e555 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 21 Jul 2026 17:11:31 +0400 Subject: [PATCH 5/5] Add Minor Rephrase --- api-reference/_hidden/dxDataGridColumn/cellTemplate.md | 2 +- api-reference/_hidden/dxTreeListColumn/cellTemplate.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/api-reference/_hidden/dxDataGridColumn/cellTemplate.md b/api-reference/_hidden/dxDataGridColumn/cellTemplate.md index 5c38ebb229..25d2d5cd36 100644 --- a/api-reference/_hidden/dxDataGridColumn/cellTemplate.md +++ b/api-reference/_hidden/dxDataGridColumn/cellTemplate.md @@ -73,7 +73,7 @@ The following details should be taken into account when you use a **cellTemplate - Template values have no effect on data operations. Implement the column's [calculateCellValue](/api-reference/_hidden/GridBaseColumn/calculateCellValue.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#calculateCellValue') or [calculateDisplayValue](/api-reference/_hidden/GridBaseColumn/calculateDisplayValue.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#calculateDisplayValue') option to transform the cell's underlying value. -- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these columns, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. Refer to the following topic for more information: [Customize Cells - Add Tooltips to Cells](/Documentation/Guide/UI_Components/DataGrid/Columns/Customize_Cells/#Add_Tooltips_to_Cells). +- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these columns, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. Refer to the following help topic for more information: [Customize Cells - Add Tooltips to Cells](/Documentation/Guide/UI_Components/DataGrid/Columns/Customize_Cells/#Add_Tooltips_to_Cells). --- ##### jQuery diff --git a/api-reference/_hidden/dxTreeListColumn/cellTemplate.md b/api-reference/_hidden/dxTreeListColumn/cellTemplate.md index 9f4d6eae7a..a26f1676c1 100644 --- a/api-reference/_hidden/dxTreeListColumn/cellTemplate.md +++ b/api-reference/_hidden/dxTreeListColumn/cellTemplate.md @@ -66,7 +66,7 @@ The following details should be taken into account when you use a **cellTemplate - Template values have no effect on data operations. Implement the column's [calculateCellValue](/api-reference/_hidden/GridBaseColumn/calculateCellValue.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#calculateCellValue') or [calculateDisplayValue](/api-reference/_hidden/GridBaseColumn/calculateDisplayValue.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#calculateDisplayValue') option to transform the cell's underlying value. -- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these columns, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. Refer to the following topic for more information: [Customize Cells - Add Tooltips to Cells](/Documentation/Guide/UI_Components/TreeList/Columns/Customize_Cells/#Add_Tooltips_to_Cells). +- [cellHintEnabled]({basewidgetpath}/Configuration/#cellHintEnabled) has no effect for columns where **cellTemplate** is configured. To display native hints in these columns, add the [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) attribute to the **cellTemplate** container element. To display custom hints, configure the DevExtreme [Tooltip](/Documentation/Guide/UI_Components/Tooltip/Overview/) component. Refer to the following help topic for more information: [Customize Cells - Add Tooltips to Cells](/Documentation/Guide/UI_Components/TreeList/Columns/Customize_Cells/#Add_Tooltips_to_Cells). --- ##### jQuery