DevExtreme React - Customize the Title
By default, the Popup allocates a part of its area to the title, regardless of whether you specified the title text or did not. To hide the title, set the showTitle option to false. Besides the text, the title area also contains a button that closes the Popup. To hide this button alone, assign false to the showCloseButton option.
$(function() { $("#popupContainer").dxPopup({ showTitle: false, visible: true }); });
If you need to define the title completely, specify a template for it. To do this, you can use the DevExtreme dxTemplate markup component...
<div id="popupContainer"> <p>Popup content</p> <div data-options="dxTemplate: { name: 'title' }"> <p>Title template</p> </div> </div>
$(function() { $("#popupContainer").dxPopup({ titleTemplate: "title" }); });
... or you can combine the HTML markup for the template directly in the titleTemplate function. Note that this function will be called only once - when the Popup appears for the first time.
<div id="popupContainer"> <p>Popup content</p> </div>
$(function() { $("#popupContainer").dxPopup({ titleTemplate: function () { return $("<p />").text("Title content"); } }); });
Just as you switch content templates on-the-fly, so can you do the same with title templates.
<div id="buttonContainer"></div> <div id="popupContainer"> <p>Popup content</p> <div data-options="dxTemplate: { name: 'titleTemplate1' }"> <p>First title template</p> </div> <div data-options="dxTemplate: { name: 'titleTemplate2' }"> <p>Second title template</p> </div> </div>
$(function() { var popup = $("#popupContainer").dxPopup({ titleTemplate: 'titleTemplate1' }).dxPopup("instance"); $("#buttonContainer").dxButton({ text: "Change the Template", onClick: function (e) { if (popup.option("titleTemplate") == "titleTemplate1") { popup.option("titleTemplate", "titleTemplate2"); } else { popup.option("titleTemplate", "titleTemplate1"); } popup.show(); } }); });
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.