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 Button widget) content.
jQuery
$(function() { $("#popupContainer").dxPopup({ title: "Popup Title", visible: true, contentTemplate: function (contentElement) { contentElement.append( $("<p />").text("Static Content"), $("<div />").attr("id", "buttonContainer").dxButton({ text: "Click me", onClick: function (e) { // ... } }); ) } }); });
Angular
<dx-popup title="Popup Title" [(visible)]="isPopupVisible" contentTemplate="popupContent"> <div *dxTemplate="let data of 'popupContent'"> <p>Static content</p> <dx-button text="Click me" (onClick)="button_click($event)"> </dx-button> </div> </dx-popup>
import { DxPopupModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { isPopupVisible: boolean = true; button_click (e) { // ... } } @NgModule({ imports: [ // ... DxPopupModule, DxButtonModule ], // ... })
ASP.NET MVC Controls
@(Html.DevExtreme().Popup() .Title("Popup Title") .Visible(true) .ContentTemplate(@<text> <p>Static content</p> @(Html.DevExtreme().Button() .Text("Click me") .OnClick("button_click") ) </text>) ) <script type="text/javascript"> function button_click(e) { // ... } </script>
Switching Templates On the Fly
If you need to render different templates depending on a specific condition, define them inside the Popup container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate option's value.
jQuery
<div id="changeTemplateButton"></div> <div id="popupContainer"> <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 popup = $("#popupContainer").dxPopup({ title: "Popup Title", visible: true, contentTemplate: "template1" }).dxPopup("instance"); $("#changeTemplateButton").dxButton({ text: "Change the Template", onClick: function (e) { var currentTemplate = popup.option("contentTemplate"); popup.option("contentTemplate", currentTemplate == "template1" ? "template2" : "template1"); popup.show(); } }); });
Angular
<dx-button text="Change the Template" (onClick)="changeTemplate()"> </dx-button> <dx-popup title="Popup Title" [(visible)]="isPopupVisible" [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-popup>
import { DxPopupModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { currentTemplate: string = "template1"; isPopupVisible: boolean = true; changeTemplate () { this.currentTemplate = (this.currentTemplate == "template1" ? "template2" : "template1"); this.isPopupVisible = true; } } @NgModule({ imports: [ // ... DxPopupModule, DxButtonModule ], // ... })
ASP.NET MVC Controls
@(Html.DevExtreme().Popup() .ID("popup") .Title("Popup Title") .Visible(true) .ContentTemplate(new TemplateName("template1")) ) @using (Html.DevExtreme().NamedTemplate("template1")) { <p>First template</p> } @using (Html.DevExtreme().NamedTemplate("template2")) { <p>Second template</p> } @(Html.DevExtreme().Button() .ID("changeTemplateButton") .Text("Change the Template") .OnClick("changeTemplateButton_click") ) <script type="text/javascript"> function changeTemplateButton_click() { var popup = $("#popup").dxPopup("instance"); var currentTemplate = popup.option("contentTemplate"); popup.option("contentTemplate", currentTemplate.selector == "#template1" ? $("#template2") : $("#template1")); popup.show(); } </script>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.