locked
Putting a ReportViewer control inside a repeater RRS feed

  • Question

  • User421319737 posted

    I am trying to use a ReportViewer control inside of a repeater. The user can search for reports, and they get a list of reports that they can select. When they select one, it will open an in-page tab which will contain the report. I use the repeater to output each report tab. The reports never load. I am providing the ReportServerUrl and ReportPath in the code behind when it loads the report tabs. In another section of the app, I am loading the reports the exact same way, except it is not inside a repeater (for a single report) with no issues. I am not understanding why this occurs. Is there some limitation on ReportViewer with Repeaters?

    Repeater Code:

    <asp:Repeater ID="rptTabContent" runat="server" ItemType="Object">
                        <ItemTemplate>
                            <div id="report-<%#Item.ReportId %>">
                                <rsweb:ReportViewer ID="rptPageReportViewer" runat="server" ProcessingMode="Remote" Width="100%" Height="800px" ClientIDMode="Predictable">
                                    <ServerReport ReportPath="" ReportServerUrl="" />
                                </rsweb:ReportViewer>
                                
                                <asp:HiddenField ID="hdnTabReportId" runat="server" Value="<%#Item.ReportId %>" ClientIDMode="Predictable" />
                                <asp:HiddenField ID="hdnTabReportPath" runat="server" Value="<%#Item.Path %>" ClientIDMode="Predictable" />
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>

    Loading report path and server URL in code behind

                foreach (RepeaterItem item in rptTabContent.Items)
                {
                    if (item != null)
                    {
                        ReportViewer reportViewer = (ReportViewer)item.FindControl("rptPageReportViewer");
                        HiddenField hdnTabReportPath = (HiddenField)item.FindControl("hdnTabReportPath");
                        reportViewer.ServerReport.ReportServerUrl = new System.Uri(ConfigurationManager.AppSettings["ReportingServer"]);
                        reportViewer.ServerReport.ReportPath = hdnTabReportPath.Value;
                    }
                }

    Wednesday, August 2, 2017 3:10 PM

Answers

  • User421319737 posted

    I found out why the server report information was being deleted. Basically when I called the DataBind() method, it binds the data to the datasource I passed in. This datasource does not have the ReportViewer with data it needs. I removed databinding after applying the Server report information and the reports appear and I'm able to run them. The only issue I have now is that the glyphui icons for the report do not appear. After some searching, this appears to be a known issue with Microsoft. Something about having a report in a master/child page.

    So for anyone who comes across the issue I had, and you need to apply the Server Report URL and Report Path in the code behind, data bind the parent control BEFORE you add the url and path. If I find a work around/solution to the missing glyphui icons for the report, I'll post it here.

    UPDATE:

    I should also note that for different reports to load properly, you should add AsyncRendering="false" to your report viewer. Before I had this, only the first report would display for all report viewers throughout all of the tabs.

    Here's my workaround for the missing icons. The links and functionality for all the report viewer icons/buttons still work, you just can't see them. My app is already using the font-awesome icons, so I wrote jQuery to change the glyphui icons to similar looking font awesome icons. Below is the code I used

    jQuery:

        $('.spinnie').each(function()
        {
            $(this).removeClass('spinnie');
            $(this).addClass('fa fa-spinner fa-spin fa-report-viewer-spinner');
        });
    
        $('.glyphui').each(function ()
        {
            if ($(this).hasClass('glyphui-calendar'))
            {
                $(this).removeClass('glyphui-calendar');
                $(this).addClass('fa fa-calendar fa-report-viewer');
            }
            else if ($(this).hasClass('glyphui-downarrow'))
            {
                $(this).removeClass('glyphui-downarrow');
                if ($(this).parent().attr('title') == "Export drop down menu")
                {
                    $(this).addClass('fa fa-angle-down fa-report-viewer-control');
                }
                else
                {
                    $(this).addClass('fa fa-angle-down fa-report-viewer');
                }
            }
            else if ($(this).hasClass('glyphui-firstpage'))
            {
                $(this).removeClass('glyphui-firstpage');
                $(this).addClass('fa fa-step-backward fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-lastpage'))
            {
                $(this).removeClass('glyphui-lastpage');
                $(this).addClass('fa fa-step-forward fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-previouspage'))
            {
                $(this).removeClass('glyphui-previouspage');
                $(this).addClass('fa fa-angle-left fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-nextpage'))
            {
                $(this).removeClass('glyphui-nextpage');
                $(this).addClass('fa fa-angle-right fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-refresh'))
            {
                $(this).removeClass('glyphui-refresh');
                $(this).addClass('fa fa-refresh fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-back'))
            {
                $(this).removeClass('glyphui-back');
                $(this).addClass('fa fa-arrow-circle-o-left fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-save'))
            {
                $(this).removeClass('glyphui-save');
                $(this).addClass('fa fa-save fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-print'))
            {
                $(this).removeClass('glyphui-print');
                $(this).addClass('fa fa-print fa-report-viewer-control');
            }
            $(this).removeClass('glyphui');
        });

    CSS:

    .fa-report-viewer
    {
        font-size: 20px;
        padding-left: 5px;
    }
    
    .fa-report-viewer-spinner
    {
        font-size: 34px;
    }
    
    .fa-report-viewer-control
    {
        margin: 6px;
        padding: 3px;
        font-size: 24px;
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 3, 2017 6:11 PM

All replies

  • User-1838255255 posted

    Hi brandoq123,

    According to your description, you say it can not load the report, please add a breakpoint to check the code if trigger this event? Check the execution sequence of your code?

    Also I hope you could post all logical code for us to check?

    Best Regards,

    Eric Du

    Thursday, August 3, 2017 8:03 AM
  • User421319737 posted

    I added a breakpoint. For some strange reason, when it leaves the foreach loop, all of the ReportViewers have the proper ReportServerUrl and ReportPath. Immediately after the foreach loop, I call DataBind() on the repeater. When that occurs, it removes the ReportServerUrl and ReportPath from all of the ReportViewers in the repeater. I'm not sure why it does that. 

    Here's all the code when a user clicks the view report button, which adds the report to a new in-page tab.

    protected void btnAddTab_Click(object sender, EventArgs e)
            {
                Button button = sender as Button;
                HiddenField hdnReportId = (HiddenField)button.Parent.FindControl("hdnReportId");
                HiddenField hdnPath = (HiddenField)button.Parent.FindControl("hdnPath");
                //Get the tabs that already exist
                List<Reports> lstReports = GetTabReports();
                Reports report = new Reports
                {
                    ReportId = hdnReportId.Value,
                    Path = hdnPath.Value
                };
                //Add the new report to the report list
                lstReports.Add(report);
                IEnumerable<Reports> enumReports = lstReports;
                //Add the reports to the repeaters to create the tabs and tab content
                rptTabContent.DataSource = enumReports;
                rptTabNav.DataSource = enumReports;
                rptTabContent.DataBind();
                rptTabNav.DataBind();
                foreach (RepeaterItem item in rptTabContent.Items)
                {
                    if (item != null)
                    {
                        ReportViewer reportViewer = (ReportViewer)item.FindControl("rptPageReportViewer");
                        HiddenField hdnTabReportPath = (HiddenField)item.FindControl("hdnTabReportPath");
                        reportViewer.ServerReport.ReportServerUrl = new System.Uri(ConfigurationManager.AppSettings["ReportingServer"]);
                        reportViewer.ServerReport.ReportPath = hdnTabReportPath.Value;
                        reportViewer.DataBind();
                    }
                }
                rptTabContent.DataBind();
                SearchResultsUpdatePanel.Update();
            }



    Thursday, August 3, 2017 11:44 AM
  • User421319737 posted

    I found out why the server report information was being deleted. Basically when I called the DataBind() method, it binds the data to the datasource I passed in. This datasource does not have the ReportViewer with data it needs. I removed databinding after applying the Server report information and the reports appear and I'm able to run them. The only issue I have now is that the glyphui icons for the report do not appear. After some searching, this appears to be a known issue with Microsoft. Something about having a report in a master/child page.

    So for anyone who comes across the issue I had, and you need to apply the Server Report URL and Report Path in the code behind, data bind the parent control BEFORE you add the url and path. If I find a work around/solution to the missing glyphui icons for the report, I'll post it here.

    UPDATE:

    I should also note that for different reports to load properly, you should add AsyncRendering="false" to your report viewer. Before I had this, only the first report would display for all report viewers throughout all of the tabs.

    Here's my workaround for the missing icons. The links and functionality for all the report viewer icons/buttons still work, you just can't see them. My app is already using the font-awesome icons, so I wrote jQuery to change the glyphui icons to similar looking font awesome icons. Below is the code I used

    jQuery:

        $('.spinnie').each(function()
        {
            $(this).removeClass('spinnie');
            $(this).addClass('fa fa-spinner fa-spin fa-report-viewer-spinner');
        });
    
        $('.glyphui').each(function ()
        {
            if ($(this).hasClass('glyphui-calendar'))
            {
                $(this).removeClass('glyphui-calendar');
                $(this).addClass('fa fa-calendar fa-report-viewer');
            }
            else if ($(this).hasClass('glyphui-downarrow'))
            {
                $(this).removeClass('glyphui-downarrow');
                if ($(this).parent().attr('title') == "Export drop down menu")
                {
                    $(this).addClass('fa fa-angle-down fa-report-viewer-control');
                }
                else
                {
                    $(this).addClass('fa fa-angle-down fa-report-viewer');
                }
            }
            else if ($(this).hasClass('glyphui-firstpage'))
            {
                $(this).removeClass('glyphui-firstpage');
                $(this).addClass('fa fa-step-backward fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-lastpage'))
            {
                $(this).removeClass('glyphui-lastpage');
                $(this).addClass('fa fa-step-forward fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-previouspage'))
            {
                $(this).removeClass('glyphui-previouspage');
                $(this).addClass('fa fa-angle-left fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-nextpage'))
            {
                $(this).removeClass('glyphui-nextpage');
                $(this).addClass('fa fa-angle-right fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-refresh'))
            {
                $(this).removeClass('glyphui-refresh');
                $(this).addClass('fa fa-refresh fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-back'))
            {
                $(this).removeClass('glyphui-back');
                $(this).addClass('fa fa-arrow-circle-o-left fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-save'))
            {
                $(this).removeClass('glyphui-save');
                $(this).addClass('fa fa-save fa-report-viewer-control');
            }
            else if ($(this).hasClass('glyphui-print'))
            {
                $(this).removeClass('glyphui-print');
                $(this).addClass('fa fa-print fa-report-viewer-control');
            }
            $(this).removeClass('glyphui');
        });

    CSS:

    .fa-report-viewer
    {
        font-size: 20px;
        padding-left: 5px;
    }
    
    .fa-report-viewer-spinner
    {
        font-size: 34px;
    }
    
    .fa-report-viewer-control
    {
        margin: 6px;
        padding: 3px;
        font-size: 24px;
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 3, 2017 6:11 PM