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
Nasif_Azam's avatar
Nasif_Azam
Icon for Super User rankSuper User
1 year ago

Hey Anonymous ,

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

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
    Icon for Super User rankSuper 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