SSRS Report Controls Inside of RadMultiPage - Display Issue

[Chintan]

 I am trying to build a simple web page with RAD TabStrip Control from Telerik. The Mulitpage controls corresponding to the TabStrip controls have an SSRS report item embedded inside of it. When debugging the application from within Visual Studio, I see the first Tab correctly but all other tabs have a problem. The SSRS report item within all other tabs is shrinked to an item that is only 1 pixel wide. Almost invisibile but if you look closely you can notice. Using Visual Studio 2010 and SSRS 2008.

 

<asp:Content ID="BodyContent" ContentPlaceHolderID="BodyContent" runat="server">

<telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
</telerik:RadScriptManager>

<br />

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="3"
     ReorderTabsOnSelect="True" Skin="Outlook" style="margin-bottom: 41"
     MultiPageID="RadMultiPage1">
    <Tabs>
    <telerik:RadTab runat="server" Text="Item 1" Selected="True">
    </telerik:RadTab>
    <telerik:RadTab runat="server" Text="Item 2">
    </telerik:RadTab>
    <telerik:RadTab runat="server" Text="Item 3">
    </telerik:RadTab>
    <telerik:RadTab runat="server" Text="Item 4">
    </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" BorderColor="Black"
    BorderStyle="Solid" BorderWidth="1px" SelectedIndex="3">

<telerik:RadPageView ID="RadPageView1" runat="server" Selected="True" Width="100%">
    <div style="width: 100%; min-width: 100px">
    <rsweb:ReportViewer ID="ReportViewer1" runat="server" Font-Names="Verdana"
    Font-Size="8pt" InteractiveDeviceInfos="(Collection)" ProcessingMode="Remote"
    WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt" Width="100%"
    CssClass="aspNetDisabled">
    <ServerReport ReportPath="^^^Some Path Goes in here^^^" />
    </rsweb:ReportViewer>
    </div>
</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server" Width="100%">
    <div style="width: 100%; min-width: 100px">
    <rsweb:ReportViewer ID="ReportViewer2" runat="server" Font-Names="Verdana"
    Font-Size="8pt" InteractiveDeviceInfos="(Collection)" ProcessingMode="Remote"
    WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt" Width="100%"
    CssClass="aspNetDisabled">
    <ServerReport ReportPath="^^^Some Path Goes in here^^^" />
    </rsweb:ReportViewer>
    </div>
</telerik:RadPageView>

 <telerik:RadPageView ID="RadPageView3" runat="server" Width="100%">
     <div style="width: 100%">
    <rsweb:ReportViewer ID="ReportViewer3" runat="server" Font-Names="Verdana"
    Font-Size="8pt" InteractiveDeviceInfos="(Collection)" ProcessingMode="Remote"
    WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt" Width="100%"
    CssClass="aspNetDisabled">
    <ServerReport ReportPath="^^^Some Path Goes in here^^^" />
    </rsweb:ReportViewer>
    </div>
</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView4" runat="server" Width="100%">
    <div style="width: 100%">
    <rsweb:ReportViewer ID="ReportViewer4" runat="server" Font-Names="Verdana"
    Font-Size="8pt" InteractiveDeviceInfos="(Collection)" ProcessingMode="Remote"
    WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt" Width="100%"
    CssClass="aspNetDisabled">
    <ServerReport ReportPath="^^^Some Path Goes in here^^^" />
    </rsweb:ReportViewer>
    </div>
</telerik:RadPageView>
</telerik:RadMultiPage>

<br />

</asp:Content>

 

asp:Content>

 

[Dimitar Terziev]

Hi Chintan,

Since you have opened a support ticket regarding the same problem, my suggestion is to keep the discussion there.

All the best,
Dimitar Terziev
the Telerik team

[MBEN]

I have a similar setup.
Can i get a solution on how to implement this?

[MBEN]

The trouble I am having is the first time i click on the tabs the report viewer renders fine. When I click on a previous tab then the report viewer disappears. Below is my declaration.

<div>
        <telerik:RadAjaxPanel runat="server">
            <telerik:RadTabStrip runat="server" ID="_tabs" MultiPageID="rmpCashValues" SelectedIndex="0">
                <Tabs>

                    <telerik:RadTab Text="Q1 Cash Values"></telerik:RadTab>
                    <telerik:RadTab Text="Q2 Cash Values"></telerik:RadTab>
                    <telerik:RadTab Text="Q3 Cash Values"></telerik:RadTab>
                    <telerik:RadTab Text="Q4 Cash Values"></telerik:RadTab>

                </Tabs>

            </telerik:RadTabStrip>

            <telerik:RadMultiPage runat="server" ID="rmpCashValues" SelectedIndex="0">
                <telerik:RadPageView runat="server" ID="_q1CashValuesTab">
                    <div style="font-weight: bold; font-size: 10px;">
                        Click by Carrier Names to see individual detail.<br />
                        Unless otherwise noted, cash values shown are actual values from the insurance carrier
                                and are updated within 10 business days of month-end. An "n/a" indicates values
                                that are not yet available.<br />
                        <asp:Literal ID="litQ1ProjectedCashValueNote" Visible="False" runat="server" Text="*Cash values shown for these policies are
                                projections based on actual prior calendar year-end values.  Projected values are not guaranteed.
                                Changes in the policy crediting rates or charges,  as well as the timing of interest credits and
                                mortality cost deductions may cause actual cash values to differ from amounts shown."></asp:Literal>
                        <br />
                        <asp:Literal ID="_q1CashValueHeader" runat="server" />
                    </div>
                    <rsweb:ReportViewer ID="_q1CashValues" runat="server" Width="100%" Font-Names="Verdana"
                        Font-Size="8pt" ShowPageNavigationControls="False" ShowParameterPrompts="False"
                        ShowRefreshButton="False" Height="400px">
                        <LocalReport ReportPath="administration\CashValues\q1CashValues.rdlc">
                            <DataSources>
                                <rsweb:ReportDataSource DataSourceId="_dataSrcMonthlyCashValues" Name="CashValues_usp_PolicyAccounting_ListByClientAndDate" />
                            </DataSources>
                        </LocalReport>
                    </rsweb:ReportViewer>
                </telerik:RadPageView>

                <telerik:RadPageView runat="server" ID="_q2CashValuesTab">
                    <div style="font-weight: bold; font-size: 10px;">
                        Click by Carrier Names to see individual detail.<br />
                        Unless otherwise noted, cash values shown are actual values from the insurance carrier
                                and are updated within 10 business days of month-end. An "n/a" indicates values
                                that are not yet available.<br />
                        <asp:Literal ID="litQ2ProjectedCashValueNote" Visible="false" runat="server">*Cash values shown for these policies are
                                projections based on actual prior calendar year-end values.  Projected values are not guaranteed.
                                Changes in the policy crediting rates or charges,  as well as the timing of interest credits and
                                mortality cost deductions may cause actual cash values to differ from amounts shown.</asp:Literal>
                        <br />
                        <asp:Literal ID="_q2CashValueHeader" runat="server" />
                    </div>
                    <rsweb:ReportViewer ID="_q2CashValues" runat="server" Width="100%" InternalBorderWidth="1"
                        Font-Names="Verdana" Font-Size="8pt" ShowToolBar="true" AsyncRendering="true"
                        ShowPageNavigationControls="false" ShowParameterPrompts="false" ShowRefreshButton="false">
                        <LocalReport ReportPath="administration\CashValues\q2CashValues.rdlc">
                            <DataSources>
                                <rsweb:ReportDataSource DataSourceId="_dataSrcMonthlyCashValues" Name="CashValues_usp_PolicyAccounting_ListByClientAndDate" />
                            </DataSources>
                        </LocalReport>
                    </rsweb:ReportViewer>
                </telerik:RadPageView>

                <telerik:RadPageView runat="server" ID="_q3CashValuesTab">

                    <div style="font-weight: bold; font-size: 10px;">
                        Click by Carrier Names to see individual detail.<br />
                        Unless otherwise noted, cash values shown are actual values from the insurance carrier
                                and are updated within 10 business days of month-end. An "n/a" indicates values
                                that are not yet available.<br />
                        <asp:Literal ID="litQ3ProjectedCashValueNote" Visible="false" runat="server">*Cash values shown for these policies are
                                projections based on actual prior calendar year-end values.  Projected values are not guaranteed.
                                Changes in the policy crediting rates or charges,  as well as the timing of interest credits and
                                mortality cost deductions may cause actual cash values to differ from amounts shown.</asp:Literal>
                        <br />
                        <asp:Literal ID="_q3CashValueHeader" runat="server" />
                    </div>
                    <rsweb:ReportViewer ID="_q3CashValues" runat="server" Width="100%" InternalBorderWidth="1"
                        Font-Names="Verdana" Font-Size="8pt" ShowToolBar="true" AsyncRendering="true"
                        ShowPageNavigationControls="false" ShowParameterPrompts="false" ShowRefreshButton="false">
                        <LocalReport ReportPath="administration\CashValues\q3CashValues.rdlc">
                            <DataSources>
                                <rsweb:ReportDataSource DataSourceId="_dataSrcMonthlyCashValues" Name="CashValues_usp_PolicyAccounting_ListByClientAndDate" />
                            </DataSources>
                        </LocalReport>
                    </rsweb:ReportViewer>
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="_q4CashValuesTab">
                    <div style="font-weight: bold; font-size: 10px;">
                        Click by Carrier Names to see individual detail.<br />
                        Unless otherwise noted, cash values shown are actual values from the insurance carrier
                                and are updated within 10 business days of month-end. An "n/a" indicates values
                                that are not yet available.<br />
                        <asp:Literal ID="litQ4ProjectedCashValueNote" Visible="false" runat="server">*Cash values shown for these policies are
                                projections based on actual prior calendar year-end values.  Projected values are not guaranteed.
                                Changes in the policy crediting rates or charges,  as well as the timing of interest credits and
                                mortality cost deductions may cause actual cash values to differ from amounts shown.</asp:Literal>
                        <br />
                        <asp:Literal ID="_q4CashValueHeader" runat="server" />
                    </div>
                    <rsweb:ReportViewer ID="_q4CashValues" runat="server" Width="100%" InternalBorderWidth="1"
                        Font-Names="Verdana" Font-Size="8pt" ShowToolBar="true" AsyncRendering="true"
                        ShowPageNavigationControls="false" ShowParameterPrompts="false" ShowRefreshButton="false">
                        <LocalReport ReportPath="administration\CashValues\q4CashValues.rdlc">
                            <DataSources>
                                <rsweb:ReportDataSource DataSourceId="_dataSrcMonthlyCashValues" Name="CashValues_usp_PolicyAccounting_ListByClientAndDate" />
                            </DataSources>
                        </LocalReport>
                    </rsweb:ReportViewer>
                </telerik:RadPageView>
            </telerik:RadMultiPage>

        </telerik:RadAjaxPanel>

    </div>
    <asp:ObjectDataSource ID="_dataSrcMonthlyCashValues" runat="server" SelectMethod="ListByClientAndDate"
        TypeName="DBLib.CashValues" OnSelected="_dataSrcMonthlyCashValues_Selected">
        <SelectParameters>
            <asp:ProfileParameter Name="ClientID" PropertyName="ClientID" DefaultValue="-1" Type="Int32" />
            <asp:Parameter Name="beginDate" DefaultValue="1/1/2007" Type="DateTime" />
        </SelectParameters>
    </asp:ObjectDataSource>

[Chintan]

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AssociateSearch.Default" MasterPageFile="~/MasterPages/Site.Master"%>

<%@ MasterType VirtualPath="~/MasterPages/Site.Master"  %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>

<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">

    <link rel="Stylesheet" type="text/css" href="css/subpages.css" />

    <script type="text/javascript">

            function OnClientTabSelecting(sender, args) {

                var id = args.get_tab().get_pageView().get_id();

                if (sender.get_selectedTab()) {
                    var oldID = sender.get_selectedTab().get_pageView().get_id();
                    if ($telerik.$("#" + oldID).is(":visible")) {
                        args.set_cancel(true);
                        $telerik.$("#" + oldID).fadeOut(500, function () { args.get_tab().select(); });
                        return;
                    }
                }

                $telerik.$("#" + id).fadeOut("fast");
                $telerik.$("#" + id).fadeIn(2000);
            }

    </script>

</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="BodyContent" runat="server">

    <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
    </telerik:RadScriptManager>

    <div style="padding-left: 5px">
    <telerik:RadButton ID="linkToPortal" runat="server" Text=" Audit Portal "
        ButtonType="LinkButton" Font-Names="Verdana" Font-Size="10pt"
        Skin="Default" Width="15%" NavigateUrl="http://mycompany.com:95/Portal/"
        Target="_self" BackColor="#AA0015" BorderColor="White" BorderStyle="Solid"
        BorderWidth="1px" Height="25px" ToolTip="Go to Home Page"
        Font-Underline="False" ForeColor="White" TabIndex="10">
    </telerik:RadButton>
    <span>     </span>

    </div>

<%--    <hr style="color: #FFFFFF; height: 1px" />
--%>

    <asp:Label ID="labelWelcome" runat="server" visible="false" Text="Welcome [[User]]"></asp:Label>

<%--    <hr style="color: #FFFFFF; height: 1px" />
--%>
    <div style="margin: auto; Width: 800px">

        <telerik:RadTextBox ID="RadTextBox1" runat="server" BorderColor="Red"
            Text="Welcome Message"
            ReadOnly="True" ForeColor="#FF3300" Width="800px" style="text-align: center"
            LabelWidth="800px">
        </telerik:RadTextBox>

    </div>

    <hr style="color: #FFFFFF; height: 1px" />

    <div style="height: 500px" >

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0"
        ReorderTabsOnSelect="True" style="margin-bottom: 41"
        MultiPageID="RadMultiPage1" Align="Center"
        OnClientTabSelecting="OnClientTabSelecting" Visible="False">
        <Tabs>
            <telerik:RadTab runat="server" Text="Tab_1" Selected="True"
                PageViewID="RadPageView1">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Tab_2"
                PageViewID="RadPageView2">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Tab_3"
                PageViewID="RadPageView3">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Tab_4"
                PageViewID="RadPageView4">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Tab_5"
                PageViewID="RadPageView5">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" BorderColor="Black"
        BorderStyle="Solid" BorderWidth="1px" SelectedIndex="0" Visible="false">

        <telerik:RadPageView ID="RadPageView1" runat="server" Selected="True" style="min-height: 450px">
            <rsweb:ReportViewer ID="ReportViewer1" runat="server" Font-Names="Verdana"
                Font-Size="8pt" InteractiveDeviceInfos="(Collection)" ProcessingMode="Remote"
                 WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt"
                 CssClass="aspNetDisabled" Height="460px"><ServerReport ReportPath="/Directory_1/Report_1" /></rsweb:ReportViewer>
        </telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView2" runat="server" style="min-height: 450px">
            <rsweb:ReportViewer ID="ReportViewer2" runat="server" Font-Names="Verdana"
                Font-Size="8pt" InteractiveDeviceInfos="(Collection)" ProcessingMode="Remote"
                WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt"
                CssClass="aspNetDisabled" Height="460px"><ServerReport ReportPath="/Directory_1/Report_2" /></rsweb:ReportViewer>
        </telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView3" runat="server" style="min-height: 450px">
            <rsweb:ReportViewer ID="ReportViewer3" runat="server" Font-Names="Verdana"
                Font-Size="8pt" InteractiveDeviceInfos="(Collection)" ProcessingMode="Remote"
                WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt"
                CssClass="aspNetDisabled" Height="460px"><ServerReport ReportPath="/Directory_1/Report_3" /></rsweb:ReportViewer>
        </telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView4" runat="server" style="min-height: 450px">
            <rsweb:ReportViewer ID="ReportViewer4" runat="server" Font-Names="Verdana"
               Font-Size="8pt" InteractiveDeviceInfos="(Collection)" ProcessingMode="Remote"
               WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt"
               CssClass="aspNetDisabled" Height="460px"><ServerReport ReportPath="/Directory_1/Report_4" /></rsweb:ReportViewer>
        </telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView5" runat="server" style="min-height: 450px">
            <rsweb:ReportViewer ID="ReportViewer5" runat="server" Font-Names="Verdana"
               Font-Size="8pt" InteractiveDeviceInfos="(Collection)" ProcessingMode="Remote"
               WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt"
               CssClass="aspNetDisabled" Height="460px"><ServerReport ReportPath="/Directory_1/Report_5" /></rsweb:ReportViewer>
        </telerik:RadPageView>

    </telerik:RadMultiPage>

    </div>

    <div style="text-align: center; vertical-align: middle;">
    <asp:Label ID="lblCounter" runat="server" Text="Label" Font-Names="Verdana" Font-Size="10pt"
    Width="20%" BackColor="#AA0015" BorderColor="White" BorderStyle="Solid"
    BorderWidth="3px" Height="25px" ToolTip="Total visits to this page."
    Font-Underline="False" ForeColor="White"></asp:Label>
    </div>

</asp:Content>

[MBEN]

Thanks for the help.Unfortunately that didn't work for me.

I have attached a screenshot of what i see on first load and if I go back to that tab after clicking on another tab.

[Nencho]

Hello MBEN,

As I can see from the provided code snippet, you have the RadTabStrip and the MultiPage, wrapped within an RadAjaxPanel. Could you please remove it and test if the problematic behavior still occurs, as there might be some issue loading the ReportViewer in such scenario.

Regards,
Nencho
Telerik

 

 

[MBEN]

I removed the RadAjaxPanel but I still see the same behavior.
The only way I can get the tabs to load is if i force a postback on each tab selected event.

It takes time to load the reports each time so I don't want to force a postback on tab click.

Please suggest.