Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
1 year ago

Paginated report not embedding inside update panel ASP.net

Using Javascript SDK in asp.net framework application. The Power BI contianer DIV is not rendering the Paginated report under ASP.updatepanel.    Outsite the updatepanel the report is rendering.
@paginated report
Anonymous's avatar
Anonymous
Not applicable
1 year ago

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? 

Also suggest for hiding filter panel ?

 

 

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

 

// To load  Report inside update panel
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function () {
powerbi.reset(document.getElementById('powerBIReportContainer'));
embedPowerBIReport();
});

</script>
</ContentTemplate>

</asp:UpdatePanel>

Nasif_Azam's avatar
Nasif_Azam
Super User
1 year ago

Hey Anonymous ,

Based on your setup, you are embedding a Power BI report inside an ASP.NET WebForms application using JavaScript, and you're facing 2 issues.

 

Issue 1: Power BI Report Not Loading Inside <asp:UpdatePanel>: The challenge here is that UpdatePanel performs a partial postback using ASP.NET's AJAX, which does not reload the full page. That often interferes with external JavaScript libraries unless re-initialized correctly. You are already using this code, which is on the right track:

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

 

Suggested Improvements:

prm.add_pageLoaded(function () {
    setTimeout(function () {
        powerbi.reset(document.getElementById('powerBIReportContainer'));
        embedPowerBIReport();
    }, 100); // short delay to ensure the container is ready
});

Confirm that powerBIReportContainer is present and not inside a conditionally hidden control at the time of rendering.

 

Issue 2: Hiding Filter and Parameter Panels: You're correctly applying these settings in your embed configuration and again in the report.on("loaded", ...) event:

settings: {
  panes: {
    filters: { expanded: false, visible: false },
    parameters: { expanded: false, visible: false },
    pageNavigation: { visible: true }
  }
}

This approach effectively hides both the filter and parameter panels. Including updateSettings() after the report loads ensures that these settings persist in case they're overridden during rendering.

 

For Detailed Information:

Power BI JavaScript Embed Configuration Reference (Microsoft Docs)

Embedding Power BI Reports in Web Applications (Microsoft Docs)

Handling Partial Page Updates in ASP.NET WebForms

Power BI JavaScript Client – GitHub Repository

 

 

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