React Popup - Customize the Content

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