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

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

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

  • Anonymous's avatar
    Anonymous
    Not applicable
    1 year ago

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


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

    </script>
    </ContentTemplate>

    </asp:UpdatePanel>

    • v-ssriganesh's avatar
      v-ssriganesh
      Icon for Community Support rankCommunity Support
      1 year ago

      Hello Anonymous,
      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.

      • Anonymous's avatar
        Anonymous
        Not applicable
        1 year ago

         

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