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
HTML
$(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
HTML
TypeScript
<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
Razor C#
@(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
HTML
JavaScript
<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
HTML
TypeScript
<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
Razor C#
@(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
Feedback