0

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();
};

Sys.Application.add_load(embedPowerBIReport);

</script>
</div>
</div>

</asp:Content>

I assumed, this is because of partical page load of update panel and tried calling with Sys.Application.add_load(embedPowerBIReport); But still not working.

I assumed, this is because of partical page load of update panel and tried calling with Sys.Application.add_load(embedPowerBIReport); But still not working.

In my project most of the screens are with update panel and wizard steps. we need to embed power BI report inside update panel, instead of keeping outside the panel.

Improve this question
6
  • "UpdatePanel" means, the content will be loaded in the background and inserted into the current document? Then window.onload is likely not going to fire any more. Commented Jul 15 at 12:41
  • so, what is the solution to render the power BI report inside update panel ? Commented Jul 16 at 9:24
  • Why would this need delaying until window.load in the first place? The script isn't loaded async, the container element already exists at this point ... So what happens when you simply invoke this directly? Commented Jul 16 at 9:28
  • if i invoke the container outside the update panel as like in the code snippet, report embedding. but when I add the container and button inside the update panel, then the report not loading. Commented Jul 17 at 10:01
  • Did you try to trigger it independently from the window load event now, or not? Commented Jul 17 at 10:11
Related questions
3263
JavaScript closure inside loops – simple practical example
2099
Loop inside React JSX
2941
Open a URL in a new tab (and not a new window)
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.