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 UI component) 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)="buttonClick($event)"> </dx-button> </div> </dx-popup>
import { DxPopupModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { isPopupVisible: boolean = true; buttonClick (e) { // ... } } @NgModule({ imports: [ // ... DxPopupModule, DxButtonModule ], // ... })
Vue
<template> <DxPopup :visible.sync="isPopupVisible" title="Popup Title"> <template> <p>Static content</p> <DxButton text="Click me" @click="buttonClick" /> </template> </DxPopup> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxPopup } from 'devextreme-vue/popup'; import { DxButton } from 'devextreme-vue/button'; export default { components: { DxButton }, data() { return { isPopupVisible: true }; }, methods: { buttonClick() { // ... } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Popup } from 'devextreme-react/popup'; import { Button } from 'devextreme-react/button'; const renderContent = () => { return ( <p>Static content</p> <Button text="Click me" onClick={buttonClick} /> ); } const buttonClick = () => { // ... } class App extends React.Component { constructor(props) { super(props); this.state = { isPopupVisible: true }; this.onHiding = this.onHiding.bind(this); } onHiding() { this.setState({ isPopupVisible: false }); } render() { return ( <Popup visible={this.state.isPopupVisible} title="Popup Title" contentRender={renderContent} onHiding={this.onHiding} /> ); } } export default App;
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 property'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() { const popup = $("#popupContainer").dxPopup({ title: "Popup Title", visible: true, contentTemplate: "template1" }).dxPopup("instance"); $("#changeTemplateButton").dxButton({ text: "Change the Template", onClick: function (e) { const 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 ], // ... })
Vue
<template> <div> <DxPopup title="Popup Title" :visible.sync="isPopupVisible" :contentTemplate="currentTemplate"> <template #template1> <p>First template</p> </template> <template #template2> <p>Second template</p> </template> </DxPopup> <DxButton text="Change the Template" @click="changeTemplate" /> </div> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxPopup } from 'devextreme-vue/popup'; import { DxButton } from 'devextreme-vue/button'; export default { components: { DxPopup, DxButton }, data() { return { isPopupVisible: true, currentTemplate: "template1" }; }, methods: { changeTemplate () { this.currentTemplate = (this.currentTemplate === 'template1' ? 'template2' : 'template1') } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Popup } from 'devextreme-react/popup'; import { Button } from 'devextreme-react/button'; const firstTemplate = () => { return ( <p>First template</p> ); } const secondTemplate = () => { return ( <p>Second template</p> ); } class App extends React.Component { constructor(props) { super(props); this.state = { isPopupVisible: true, renderContent: firstTemplate }; this.changeTemplate = this.changeTemplate.bind(this); this.onHiding = this.onHiding.bind(this); } changeTemplate() { this.setState({ renderContent: this.state.renderContent === firstTemplate ? secondTemplate : firstTemplate }); } onHiding() { this.setState({ isPopupVisible: false }); } render() { return ( <div> <Popup title="Popup Title" visible={this.state.isPopupVisible} onHiding={this.onHiding} contentRender={this.state.renderContent} /> <Button text="Change the Template" onClick={this.changeTemplate} /> </div> ); } } export default App;
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() { const popup = $("#popup").dxPopup("instance"); const 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.