Specifying the Content Template
The template implementation depends on the used framework or library. Examples of jQuery, Angular, and ASP.NET MVC are presented below. They show how to create a template consisting of static (text) and dynamic (the Switch widget) content.
jQuery
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" /> <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" widget is configured here }) ) } }); });
Angular
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" /> <dx-popover target="#image" showEvent="dxhoverstart" contentTemplate="popoverContent"> <div *dxTemplate="let data of 'popoverContent'"> <p>Static content</p> <dx-switch> <!-- The "Switch" widget is configured here --> </dx-switch> </div> </dx-popover>
import { DxPopoverModule, DxSwitchModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPopoverModule, DxSwitchModule ], // ... })
ASP.NET MVC Controls
@(Html.DevExtreme().Popover() .Target("#image") .ShowEvent("dxhoverstart") .ContentTemplate(@<text> <p>Static content</p> @(Html.DevExtreme().Switch() // The "Switch" widget is configured here ) </text>) ) <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
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 option's value.
jQuery
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" /> <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() { var popover = $("#popoverContainer").dxPopover({ target: "#image", showEvent: 'dxhoverstart', hideEvent: 'dxhoverend', contentTemplate: 'template1' }).dxPopover("instance"); $("#buttonContainer").dxButton({ text: "Change the Template", onClick: function (e) { var currentTemplate = popover.option("contentTemplate"); popover.option("contentTemplate", currentTemplate == "template1" ? "template2" : "template1"); } }); });
#buttonContainer { display: block; width: 200px }
Angular
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" /> <dx-button id="buttonContainer" text="Change the Template" (onClick)="changeTemplate()"> </dx-button> <dx-popover target="#image" showEvent="dxhoverstart" hideEvent="dxhoverend" [contentTemplate]="currentTemplate"> <div *dxTemplate="let data of 'template1'"> <p>First template</p> </div> <div *dxTemplate="let data of 'template2'"> <p>Second template</p> </div> </dx-popover>
import { DxPopoverModule, DxButtonModule } from 'devextreme-angular'; // ... export class AppComponent { currentTemplate: string = "template1"; changeTemplate () { this.currentTemplate = (this.currentTemplate == 'template1' ? 'template2' : 'template1') } } @NgModule({ imports: [ // ... DxPopoverModule, DxButtonModule ], // ... })
#buttonContainer { display: block; width: 200px }
ASP.NET MVC Controls
@(Html.DevExtreme().Popover() .ID("popover") .Target("#image") .ShowEvent("dxhoverstart") .HideEvent("dxhoverend") .ContentTemplate(new TemplateName("template1")) ) @using (Html.DevExtreme().NamedTemplate("template1")) { <p>First template</p> } @using (Html.DevExtreme().NamedTemplate("template2")) { <p>Second template</p> } <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" /> @(Html.DevExtreme().Button() .ID("changeTemplateButton") .Text("Change the Template") .OnClick("changeTemplateButton_click") ) <script type="text/javascript"> function changeTemplateButton_click() { var popover = $("#popover").dxPopover("instance"); var currentTemplate = popover.option("contentTemplate"); popover.option("contentTemplate", currentTemplate.selector == "#template1" ? $("#template2") : $("#template1")); } </script>
#changeTemplateButton { display: block; width: 200px }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.