Power BI Paginated Report not rendering inside asp:UpdatePanel

[Lakshmanan1]

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?

</ContentTemplate>
</asp:UpdatePanel>

<script src="https://cdn.jsdelivr.net/npm/powerbi-client@2.19.0/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();
};
</script>
</div>
</div>

</asp:Content>

[Lakshmanan1]

how to hide filter panel below code not working 

panes: {
filters: { expanded: false, visible: false },
pageNavigation: { visible: true },
parameters: { expanded: false, visible: false }// Hides the parameter pane }
}

[Nasif_Azam]

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

[Lakshmanan1]

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/powerbi-client@2.19.0/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]

Hey @Lakshmanan1 ,

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

[Lakshmanan1]

Thanks for your response. 

As you suggested i added Sys.Application.add_load .  But still the PowerBI not rendering. FYI. the update panel is on ascx page. 

// Trigger embedding after UpdatePanel updates
Sys.Application.add_load(function () {
    embedPowerBIReport();
});

[Nasif_Azam]

Hey @Lakshmanan1 ,

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

[Lakshmanan1]

Hi Nasif, 

I used the code you suggested . But still not working and  erros in  browser's developer tools console.

Is that anything i am missing. 

<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/powerbi-client@2.19.0/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 }
}
});
});
}

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

</script>
</ContentTemplate>

</asp:UpdatePanel>

[v-ssriganesh]

Hello @Lakshmanan1,
Thank you for reaching out to the Microsoft Fabric Forum Community and thanks to @Nasif_Azam for the solid guidance provided so far.

Since you're still seeing issues and there are errors in the browser's developer console, the next best step would be to review those specific error messages. They’ll help us identify whether the problem is related to variable values, the timing of script execution or something else in the page lifecycle.

Could you please share the exact error messages you're seeing?

This will help us pinpoint what might be going wrong and guide you with a precise fix.

[Lakshmanan1]

I used this code, still not working. I cannot see any error message in console as well. 

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