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..cca3a784b8 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,15 @@ 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 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##### + +- **columns[]**.[width](/api-reference/_hidden/GridBaseColumn/width.md '{basewidgetpath}/Configuration/columns/#width') +- [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 417cb2e58a..25d2d5cd36 100644 --- a/api-reference/_hidden/dxDataGridColumn/cellTemplate.md +++ b/api-reference/_hidden/dxDataGridColumn/cellTemplate.md @@ -71,10 +71,10 @@ 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 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 7428b4068a..a26f1676c1 100644 --- a/api-reference/_hidden/dxTreeListColumn/cellTemplate.md +++ b/api-reference/_hidden/dxTreeListColumn/cellTemplate.md @@ -60,7 +60,43 @@ 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. + +- 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 help topic for more information: [Customize Cells - Add Tooltips to Cells](/Documentation/Guide/UI_Components/TreeList/Columns/Customize_Cells/#Add_Tooltips_to_Cells). + +--- +##### 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 +106,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