Refreshing Popover Body Dynamically in Kendo UI for jQuery

Environment

Product	Kendo UI for jQuery Popover
Version	2025.2.702

Description

I want to refresh the body content of a Kendo UI for jQuery Popover dynamically after it has been displayed. Setting the Popover options programmatically with setOptions updates the initial configuration but does not reflect changes in the displayed content. The content remains static after the Popover has been shown. How can I ensure the body content updates dynamically?

This knowledge base article also answers the following questions:

• How to update Kendo UI for jQuery Popover content dynamically?
• Why does setOptions not refresh Popover content after showing?
• How to handle dynamic content in Kendo UI for jQuery Popover?

Solution

To dynamically update the content of the Popover after it has been shown, use the show event handler to modify the body content directly. The show event is triggered whenever the Popover becomes visible, allowing you to inject updated content.

Follow these steps:

1. Configure the Popover with the show event handler.
2. In the show event, use e.sender.wrapper.find(".k-popover-body") to target the body element inside the Popover.
3. Update the content using .html() with the new dynamic data.

Here’s an example:

  <span id="target" class="k-group">Target</span>

<script id="body-template" type="text/x-kendo-template">
    <div>
        <p>The current time is: #: time #</p>
    </div>
</script>

<script>
    $(document).ready(function () {
        var bodyTemplate = kendo.template($("#body-template").html());
var counter = 1
        $("#target").kendoPopover({           
            position: "right",
            header: "Dynamic Template Example",
            show: function(e) {
            	let content = bodyTemplate({ time: new Date().toLocaleTimeString() })
            	e.sender.wrapper.find(".k-popover-body").html(content)
         	 },
            body: function () {
              	
                return bodyTemplate({ time: new Date().toLocaleTimeString() });
            }
        });
    });
</script>

Explanation

• show event triggers each time the Popover is displayed.
• e.sender.wrapper.find(".k-popover-body").html(newContent) modifies the body content dynamically.

Use this approach to ensure the Popover content updates each time it is opened.

See Also

• Kendo UI for jQuery Popover Documentation
• Popover API