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
$(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 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
@(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" 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
@(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
Add Scrolling
The Popup component always displays a native scrollbar when the height of the Popup's content is greater than that of the Popup.
You can also implement a scrollbar that belongs to the ScrollView component. This implementation is more flexible. For example, you can enable right-to-left representation or scroll the content to a specific position. For more information about the available options, refer to the ScrollView API section.
To implement this solution, follow the steps below:
Wrap the content in the ScrollView component and place it in the Popup container.
Set the height and width of the ScrollView to
100%
of the popup content area. To enable this functionality, wrap content into the ScrollView component and set its height and width to 100% of the Popup content area:
jQuery
$(function () { $("#popup").dxPopup({ contentTemplate: () => { const content = $("<div />"); content.dxScrollView({ height: "100%", width: "100%" }); return content; }, // ... }); });
Angular
<dx-popup ... > <div *dxTemplate="let data of 'content'"> <dx-scroll-view width="100%" height="100%"> <!-- ... --> </dx-scroll-view> </div> </dx-popup> <!-- ... -->
Vue
<template> <div id="app-container"> <DxPopup ... > <template #content> <DxScrollView height="100%" width="100%"> <!-- ... --> </DxScrollView> </template> </DxPopup> <!-- ... --> </div> </template> <script> // ... import { DxScrollView } from "devextreme-vue/scroll-view"; export default { // ... components: { // ... DxScrollView } } </script>
React
// ... import ScrollView from 'devextreme-react/scroll-view'; const renderContent = () => { return ( <> <ScrollView height="100%" width="100%"> {/* ... */} </ScrollView> </> ) }; const App = () => { // ... return ( <div className="App"> <Popup contentRender={renderContent} /> </div> ); } export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.