Specifying the Content Template
The following code shows how to create a template consisting of static (text) and dynamic (the Switch UI component) content:
HTML
JavaScript
- <img id="image" src="https://url/to/an/image" />
- <div id="popoverContainer"></div>
- $(function() {
- $("#popoverContainer").dxPopover({
- target: "#image",
- showEvent: 'dxhoverstart',
- contentTemplate: function (contentElement) {
- contentElement.append(
- $("<p />").text("Static Content"),
- $("<div />").attr("id", "switchContainer").dxSwitch({
- // The "Switch" UI component is configured here
- })
- )
- }
- });
- });
Switching Templates On the Fly
If you need to render different templates depending on a specific condition, define them inside the Popover container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate property's value.
HTML
JavaScript
CSS
- <img id="image" src="https://url/to/an/image" />
- <div id="buttonContainer"></div>
- <div id="popoverContainer">
- <div data-options="dxTemplate: { name: 'template1' }">
- <p>First template</p>
- </div>
- <div data-options="dxTemplate: { name: 'template2' }">
- <p>Second template</p>
- </div>
- </div>
- $(function() {
- const popover = $("#popoverContainer").dxPopover({
- target: "#image",
- showEvent: 'dxhoverstart',
- hideEvent: 'dxhoverend',
- contentTemplate: 'template1'
- }).dxPopover("instance");
- $("#buttonContainer").dxButton({
- text: "Change the Template",
- onClick: function (e) {
- const currentTemplate = popover.option("contentTemplate");
- popover.option("contentTemplate", currentTemplate == "template1" ? "template2" : "template1");
- }
- });
- });
- #buttonContainer {
- display: block;
- width: 200px
- }
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.