Specifying the Content Template
The example below shows how to create a template consisting of static (text) and dynamic (the Button UI component) content.
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) {
- // ...
- }
- });
- )
- }
- });
- });
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.
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();
- }
- });
- });
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.