Paginated report not embedding inside update panel ASP.net

Hi,

I am using the ASP.NET WebForms framework and embedding the report using a JavaScript SDK approach.

The `powerBIReportContainer` div does not display the report when it is placed inside an `<asp:UpdatePanel>`.

Note: using Wizard forms as well. 

When the `powerBIReportContainer` div is positioned outside the `</asp:UpdatePanel>`, the Power BI report renders correctly.

Below is my code snippet. Could you please assist me with what changes I need to make in my JavaScript or any other solutions?

</ContentTemplate>
</asp:UpdatePanel>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/powerbi.js"></script>
<asp:Button ID="btnGenerateReport" runat="server" Text="Generate Report" CssClass="genric_btn green" OnClick="btnGenerateReport_Click" />
<div id="powerBIReportContainer" style="height:600px;width:100%;"></div>
<script type="text/javascript">
var embedUrl = '<%= EmbedUrl %>';
var embedToken = '<%= EmbedToken %>';
var reportId = '<%= ReportId %>';

function embedPowerBIReport() {
if (!embedUrl || !embedToken || !reportId) return;

var models = window['powerbi-client'].models;
var embedConfig = {
type: 'report',
isPaginatedReport: true,
id: reportId,
embedUrl: embedUrl,
accessToken: embedToken,
tokenType: models.TokenType.Embed,
settings: {
panes: {
filters: { visible: false },
pageNavigation: { visible: true }
},
navContentPaneEnabled: true
}
};
var reportContainer = document.getElementById('powerBIReportContainer');
powerbi.reset(reportContainer);
var report = powerbi.embed(reportContainer, embedConfig);

// Show page navigation after report is loaded
report.on("loaded", function () {
report.updateSettings({
panes: {
pageNavigation: { visible: true }
}
});
});
}

window.onload = function () {
embedPowerBIReport();
};
</script>
</div>
</div>

</asp:Content>

Hello Anonymous,

Could you please confirm if the solution provided has addressed your query?

Thank you.

Hi Ssriganesh, No soukution is working. Do you have any solution on how to render power BI Paginated report inside <ASP.UpdatePanel>.  I using below code but not working. 

<asp:UpdatePanel ID="UpdatePanelReport" runat="server">
<ContentTemplate>
<div class="clear"></div>
<div class="search-col3">
<asp:Button ID="btnBack" runat="server" Text="<< Back" OnClick="btnBack_Click" CssClass="genric_btn " Visible="false" />
<%--<asp:Button ID="btnGenerateReport" runat="server" Text="Generate Report" CssClass="genric_btn green" OnClick="btnGenerateReport_Click" />--%>
</div>
<%--<div id="powerBIReportContainer" style="height:600px;width:100%;"></div>--%>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/powerbi.js"></script>
<asp:Button ID="btnGenerateReport" runat="server" Text="Generate Report" OnClick="btnGenerateReport_Click" />
<div id="powerBIReportContainer" style="height:600px;width:100%;"></div>
<script type="text/javascript">
var embedUrl = '<%= EmbedUrl %>';
var embedToken = '<%= EmbedToken %>';
var reportId = '<%= ReportId %>';

function embedPowerBIReport() {

if (!embedUrl || !embedToken || !reportId) return;

var models = window['powerbi-client'].models;
var embedConfig = {
type: 'report',
isPaginatedReport: true,
id: reportId,
embedUrl: embedUrl,
accessToken: embedToken,
tokenType: models.TokenType.Embed,
settings: {
panes: {
filters: { expanded: false, visible: false },
pageNavigation: { visible: true },
parameters: { expanded: false, visible: false }// Hides the parameter pane }
},
navContentPaneEnabled: true
}
};
var reportContainer = document.getElementById('powerBIReportContainer');
powerbi.reset(reportContainer);
var report = powerbi.embed(reportContainer, embedConfig);

report.on("loaded", function () {
report.updateSettings({
panes: {
filters: { expanded: false, visible: false },
pageNavigation: { visible: true },
parameters: { expanded: false, visible: false }
}
});
});
}

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function () {
powerbi.reset(document.getElementById('powerBIReportContainer'));
embedPowerBIReport();
});

</script>
</ContentTemplate>

</asp:UpdatePanel>

Hi Anonymous 

You're encountering a common issue when embedding Power BI reports—especially Paginated reports—within an ASP.NET Web Forms application that uses UpdatePanel for partial page updates. The problem arises because Power BI’s JavaScript SDK dynamically injects and controls the report rendering via the DOM, and UpdatePanel interferes with that process due to how it handles partial postbacks. Specifically, when a postback occurs inside an UpdatePanel, it replaces the inner HTML of the update panel, which can remove or disrupt the JavaScript-initialized Power BI container, preventing the Paginated report from rendering properly.

When you place the Power BI embed code inside the UpdatePanel, the JavaScript execution might be interrupted or not re-triggered after the async postback, resulting in a blank or unresponsive Power BI container. However, placing the Power BI embedding logic outside the UpdatePanel avoids this problem because the full page lifecycle isn't interrupted, allowing the SDK to initialize and render the report correctly.

To work around this, you have two options:

Move the Power BI embedding logic outside the UpdatePanel and trigger updates via JavaScript or server-side logic that doesn’t require a partial postback.

If you must use UpdatePanel, use the Sys.Application.add_load() method in ASP.NET AJAX to re-run your embedding JavaScript after every partial postback. For example:

Sys.Application.add_load(function () {

// your Power BI embed code here

});

This ensures the SDK re-initializes after the DOM is updated.