DevExtreme jQuery/JS - Customize the Content

Specifying the Content Template

The template implementation depends on the used framework or library. Examples of jQuery, Angular, and ASP.NET MVC are presented below. They show how to create a template consisting of static (text) and dynamic (the Switch widget) content.

HTML
JavaScript
  • <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
  • <div id="popoverContainer"></div>
  • $(function() {
  • $("#popoverContainer").dxPopover({
  • target: "#image",
  • showEvent: 'dxhoverstart',
  • contentTemplate: function (contentElement) {
  • contentElement.append(
  • $("<p />").text("Static Content"),
  • $("<div />").attr("id", "switchContainer").dxSwitch({
  • // The "Switch" widget is configured here
  • })
  • )
  • }
  • });
  • });

Switching Templates On the Fly

If you need to render different templates depending on a specific condition, define them inside the Popover container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate option's value.

HTML
JavaScript
CSS
  • <img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
  • <div id="buttonContainer"></div>
  • <div id="popoverContainer">
  • <div data-options="dxTemplate: { name: 'template1' }">
  • <p>First template</p>
  • </div>
  • <div data-options="dxTemplate: { name: 'template2' }">
  • <p>Second template</p>
  • </div>
  • </div>
  • $(function() {
  • var popover = $("#popoverContainer").dxPopover({
  • target: "#image",
  • showEvent: 'dxhoverstart',
  • hideEvent: 'dxhoverend',
  • contentTemplate: 'template1'
  • }).dxPopover("instance");
  •  
  • $("#buttonContainer").dxButton({
  • text: "Change the Template",
  • onClick: function (e) {
  • var currentTemplate = popover.option("contentTemplate");
  • popover.option("contentTemplate", currentTemplate == "template1" ? "template2" : "template1");
  • }
  • });
  • });
  • #buttonContainer {
  • display: block;
  • width: 200px
  • }
See Also