Specifying the Content Template
The example below shows how to create a template consisting of static (text) and dynamic (the Button UI component) 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)="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 v-model:visible="isPopupVisible" title="Popup Title"> <template> <p>Static content</p> <DxButton text="Click me" @click="buttonClick" /> </template> </DxPopup> </template> <script> 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.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
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 property'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() { 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
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 ], // ... })
Vue
<template> <div> <DxPopup title="Popup Title" v-model:visible="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.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.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
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() { const popup = $("#popup").dxPopup("instance"); const currentTemplate = popup.option("contentTemplate"); popup.option("contentTemplate", currentTemplate.selector == "#template1" ? $("#template2") : $("#template1")); popup.show(); } </script>
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.