Specifying the Content Template
The example below shows how to create a template consisting of static (text) and dynamic (the Button UI component) content.
- $(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) {
- // ...
- }
- });
- )
- }
- });
- });
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.
- <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();
- }
- });
- });
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.
- $(function () {
- $("#popup").dxPopup({
- contentTemplate: () => {
- const content = $("<div />");
- content.dxScrollView({
- height: "100%",
- width: "100%"
- });
- return content;
- },
- // ...
- });
- });
If you have technical questions, please create a support ticket in the DevExpress Support Center.