diff --git a/api-reference/10 UI Components/dxDropDownBox/1 Configuration/contentTemplate.md b/api-reference/10 UI Components/dxDropDownBox/1 Configuration/contentTemplate.md index 99a5370fb7..d7df00b81e 100644 --- a/api-reference/10 UI Components/dxDropDownBox/1 Configuration/contentTemplate.md +++ b/api-reference/10 UI Components/dxDropDownBox/1 Configuration/contentTemplate.md @@ -5,7 +5,7 @@ default: 'content' --- --- ##### shortDescription -Specifies a custom template for the drop-down content. +Specifies a custom template for drop-down content. ##### param(templateData): Object Data associated with the UI component. @@ -28,5 +28,30 @@ A template name or container. } #####See Also##### + +--- + +##### jQuery + - [DropDownBox - Getting Started](/concepts/05%20UI%20Components/DropDownBox/00%20Getting%20Started%20with%20DropDownBox '/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/') -- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') \ No newline at end of file +- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') + +##### Angular + +- [DropDownBox - Getting Started](/concepts/05%20UI%20Components/DropDownBox/00%20Getting%20Started%20with%20DropDownBox '/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/') +- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +##### Vue + +- [DropDownBox - Getting Started](/concepts/05%20UI%20Components/DropDownBox/00%20Getting%20Started%20with%20DropDownBox '/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/') +- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +##### React + +- [DropDownBox - Getting Started](/concepts/05%20UI%20Components/DropDownBox/00%20Getting%20Started%20with%20DropDownBox '/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/') +- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +--- diff --git a/api-reference/10 UI Components/dxOverlay/1 Configuration/contentTemplate.md b/api-reference/10 UI Components/dxOverlay/1 Configuration/contentTemplate.md index 47a96be9cd..01aa4ef196 100644 --- a/api-reference/10 UI Components/dxOverlay/1 Configuration/contentTemplate.md +++ b/api-reference/10 UI Components/dxOverlay/1 Configuration/contentTemplate.md @@ -20,5 +20,30 @@ A template name or container. } #####See Also##### + +--- + +##### jQuery + - [Customize the Content](/concepts/05%20UI%20Components/Popover/05%20Customize%20the%20Appearance/05%20Customize%20the%20Content '/Documentation/Guide/UI_Components/{WidgetName}/Customize_the_Appearance/Customize_the_Content/') -- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') \ No newline at end of file +- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') + +##### Angular + +- [Customize the Content](/concepts/05%20UI%20Components/Popover/05%20Customize%20the%20Appearance/05%20Customize%20the%20Content '/Documentation/Guide/UI_Components/{WidgetName}/Customize_the_Appearance/Customize_the_Content/') +- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +##### Vue + +- [Customize the Content](/concepts/05%20UI%20Components/Popover/05%20Customize%20the%20Appearance/05%20Customize%20the%20Content '/Documentation/Guide/UI_Components/{WidgetName}/Customize_the_Appearance/Customize_the_Content/') +- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +##### React + +- [Customize the Content](/concepts/05%20UI%20Components/Popover/05%20Customize%20the%20Appearance/05%20Customize%20the%20Content '/Documentation/Guide/UI_Components/{WidgetName}/Customize_the_Appearance/Customize_the_Content/') +- [Custom Templates](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +--- diff --git a/api-reference/10 UI Components/dxToast/1 Configuration/contentTemplate.md b/api-reference/10 UI Components/dxToast/1 Configuration/contentTemplate.md index c51063648d..6417c5aa2d 100644 --- a/api-reference/10 UI Components/dxToast/1 Configuration/contentTemplate.md +++ b/api-reference/10 UI Components/dxToast/1 Configuration/contentTemplate.md @@ -3,5 +3,30 @@ --- #####See Also##### + +--- + +##### jQuery + - [Customize Toast Content](/Documentation/Guide/UI_Components/Toast/Getting_Started_with_Toast/#Customize_Toast_Content) -- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') \ No newline at end of file +- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') + +##### Angular + +- [Customize Toast Content](/Documentation/Guide/UI_Components/Toast/Getting_Started_with_Toast/#Customize_Toast_Content) +- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +##### Vue + +- [Customize Toast Content](/Documentation/Guide/UI_Components/Toast/Getting_Started_with_Toast/#Customize_Toast_Content) +- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +##### React + +- [Customize Toast Content](/Documentation/Guide/UI_Components/Toast/Getting_Started_with_Toast/#Customize_Toast_Content) +- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +--- diff --git a/api-reference/10 UI Components/dxTooltip/1 Configuration/contentTemplate.md b/api-reference/10 UI Components/dxTooltip/1 Configuration/contentTemplate.md index eeb19f1aa4..6be224d6c0 100644 --- a/api-reference/10 UI Components/dxTooltip/1 Configuration/contentTemplate.md +++ b/api-reference/10 UI Components/dxTooltip/1 Configuration/contentTemplate.md @@ -7,5 +7,30 @@ } #####See Also##### + +--- + +##### jQuery + - [Customize the Content](/concepts/05%20Widgets/Tooltip/10%20Customize%20the%20Content '/Documentation/Guide/UI_Components/Tooltip/Customize_the_Content/') -- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') \ No newline at end of file +- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') + +##### Angular + +- [Customize the Content](/concepts/05%20Widgets/Tooltip/10%20Customize%20the%20Content '/Documentation/Guide/UI_Components/Tooltip/Customize_the_Content/') +- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +##### Vue + +- [Customize the Content](/concepts/05%20Widgets/Tooltip/10%20Customize%20the%20Content '/Documentation/Guide/UI_Components/Tooltip/Customize_the_Content/') +- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +##### React + +- [Customize the Content](/concepts/05%20Widgets/Tooltip/10%20Customize%20the%20Content '/Documentation/Guide/UI_Components/Tooltip/Customize_the_Content/') +- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates') +- [Declare Content in the Markup](/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Declare_Content_in_the_Markup) + +--- diff --git a/concepts/50 React Components/40 Component Configuration Syntax/45 Declare Content in the Markup.md b/concepts/50 React Components/40 Component Configuration Syntax/45 Declare Content in the Markup.md index ff203f8695..0f8e1ddae1 100644 --- a/concepts/50 React Components/40 Component Configuration Syntax/45 Declare Content in the Markup.md +++ b/concepts/50 React Components/40 Component Configuration Syntax/45 Declare Content in the Markup.md @@ -1,4 +1,4 @@ -The following UI components allow you to declare their content directly in the markup: +The following UI components allow you to declare content directly in the markup (inline): - [Drawer](/api-reference/10%20UI%20Components/dxDrawer '/Documentation/ApiReference/UI_Components/dxDrawer/') - [DropDownBox](/api-reference/10%20UI%20Components/dxDropDownBox '/Documentation/ApiReference/UI_Components/dxDropDownBox/') @@ -7,58 +7,46 @@ The following UI components allow you to declare their content directly in the m - [Popup](/api-reference/10%20UI%20Components/dxPopup '/Documentation/ApiReference/UI_Components/dxPopup/') - [Resizable](/api-reference/10%20UI%20Components/dxResizable '/Documentation/ApiReference/UI_Components/dxResizable/') - [ScrollView](/api-reference/10%20UI%20Components/dxScrollView '/Documentation/ApiReference/UI_Components/dxScrollView/') +- [Toast](/Documentation/ApiReference/UI_Components/dxToast/) - [Tooltip](/api-reference/10%20UI%20Components/dxTooltip '/Documentation/ApiReference/UI_Components/dxTooltip/') - [ValidationGroup](/api-reference/10%20UI%20Components/dxValidationGroup '/Documentation/ApiReference/UI_Components/dxValidationGroup/') -The following is an example with ScrollView: +The following code snippet specifies inline ScrollView content: - - import ScrollView from 'devextreme-react/scroll-view'; + + import { ScrollView } from 'devextreme-react/scroll-view'; - export default function App() { + function App() { return ( -
Some scrollable content
+
ScrollView content
); } - - - import ScrollView from 'devextreme-react/scroll-view'; - class App extends React.Component { - render() { - return ( - -
Some scrollable content
-
- ); - } - } +[note] -[important] +- To specify dynamic or conditionally rendered content, wrap this content in a static element as follows: -These UI components do not support dynamically or conditionally rendered content in their root element. For example, the following code **does not work**: + + +
+ { + someCondition &&
...
+ } +
+
- - - { - someCondition &&
...
- // when the condition changes in runtime, the UI component may not render content correctly - } -
+ Note that [Fragment](https://react.dev/reference/react/Fragment) is a dynamic element. Wrap content with tags such as `
` or ``. -Wrap the content in a static element: +- React mounts inline content within DevExtreme components immediately at component initialization. This behavior ignores **deferRendering** options in components that do not render content immediately: - - -
- { - someCondition &&
...
- } -
-
+ - DropDownBox + - Popup + - Popover + - Toast + - Tooltip -Note that `React.Fragment` is a dynamically rendered element and doesn't fit in this case. Use static elements such as `div` or `span` instead. + This behavior initializes and renders embedded UI components at parent component initialization. To ensure embedded components are initialized and rendered only when the parent component is rendered or opened, define **contentComponent** or **contentRender**. -[/important] \ No newline at end of file +[/note] \ No newline at end of file