Paginated report not embedding inside update panel ASP.net

Hey Anonymous ,

Since Sys.Application.add_load didn't resolve the issue, here are some other things to try:

1. Ensure UpdatePanel wraps both the button and the report container to ensure they are updated together.

   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
           <asp:Button ID="btnGenerateReport" runat="server" Text="Generate Report" />
           <div id="powerBIReportContainer" style="height:600px;"></div>
       </ContentTemplate>
   </asp:UpdatePanel>

2. Use PageRequestManager for postback completion:

   var prm = Sys.WebForms.PageRequestManager.getInstance();
   prm.add_pageLoaded(function () {
       embedPowerBIReport();
   });

3. Reset the report if already embedded:

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

4. Check for any JavaScript errors in the browser's developer tools console.

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

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

Hi,

Please suggest where to add in code level parameterPaneEnabled: false 

Below code not working.

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,
parameterPaneEnabled: false
}
};
var reportContainer = document.getElementById('powerBIReportContainer');
powerbi.reset(reportContainer);
var report = powerbi.embed(reportContainer, embedConfig);

Hello Anonymous,
Thank you for the update and please try below code:

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 }

        },

        navContentPaneEnabled: true,

        parameterPaneEnabled: false

    }

};

I trust this information proves useful. If it does, kindly “Accept as solution” and give it a 'Kudos' to help others locate it easily.
Thank you.