Hey @Lakshmanan1 ,
In your situation, the issue likely arises because the UpdatePanel is performing a partial postback, which can cause the embedded Power BI report to not render properly. The JavaScript code you're using to embed the Power BI report might be running before the UpdatePanel finishes updating its content, causing the report container (#powerBIReportContainer) to not be fully loaded or accessible.
1. Trigger JavaScript After UpdatePanel Completes: The issue can be resolved by ensuring that the Power BI embedding code runs after the UpdatePanel has been updated. You can do this by hooking into the Sys.Application.add_load event, which ensures the Power BI report embedding happens only after the UpdatePanel is fully refreshed.
Update your script to include Sys.Application.add_load like so:
<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 }
}
});
});
}
// Trigger embedding after UpdatePanel updates
Sys.Application.add_load(function () {
embedPowerBIReport();
});
</script>2. Ensure Button Triggers UpdatePanel: Ensure that the btnGenerateReport button triggers the UpdatePanel refresh when clicked. Make sure the UpdatePanel wraps the content to be updated.
3.Embedding After Postback: Use Sys.Application.add_load to execute the embedding script after the UpdatePanel completes its update during a postback.
For Detailed Information:
Embedding Power BI in Web Applications
Power BI JavaScript API
ASP.NET UpdatePanel Overview
If you found this solution helpful, please consider accepting it and giving it a kudos (Like) it’s greatly appreciated and helps others find the solution more easily.
Best Regards,
Nasif Azam
