Dynamic User Controls in MultipageView

[Jim]

Hi All,

I have a RadTabStrip/RadMultiPage arrangement patterned after the Load on Demand and the Dynamic Page View examples.  In one view (ReportsPage) I have a user control that contains a RadSplitter with 2 RadPanes and a RadSplitBar.  In the two panes I want to dynamically add controls based on the value of a session object.  However I haven't got that far due to another issue.  Initially in the left pane I have another user control (ReportSelection) that contains a RadTreeView which is populated as expected in the page load of the parent control.  When I click on another tab and return to the original tab the user control with the tree view no longer appears so it seems like a view state issue.  Code snippets are below.  If anyone can help me with this I'd appreciate it.

Thanks,
Jim

Mainpage.aspx:              

        <script type="text/javascript">
            function onTabSelecting(sender, args)
            {
                if (args.get_tab().get_pageView())
                {
                    if (args.get_tab().get_pageView().get_id())
                    {
                        args.get_tab().set_postBack(false);
                    }
                }
            }
        </script>
                <telerik:RadTabStrip ID="TopTabStrip" runat="server"
                    MultiPageID="TopMultiPage" SelectedIndex="3"
                    Skin="Office2007" style="padding-left:50px;"
                    ontabclick="TopTabStrip_TabClick" onclienttabselecting="onTabSelecting">
                </telerik:RadTabStrip>
                <telerik:RadMultiPage ID="TopMultiPage" runat="server" Height="100%"
                    SelectedIndex="2" CssClass="MultipageWrapper"
                    onpageviewcreated="TopMultiPage_PageViewCreated" Width="100%">
                </telerik:RadMultiPage>

Mainpage .cs:

        protected void Page_Load( object sender, EventArgs e )
        {
            if ( !Page.IsPostBack )
            {
                AddTab( "Admin" );
                AddTab( "Configure" );
                RadTab tab = AddTab( "Reports" );
                AddTab( "Help" );
                AddPageView( this.TopTabStrip.FindTabByText( "Reports" ) );
                tab.PageView.Selected = true;
                this.TopTabStrip.SelectedIndex = 2;
            }
        }

        private RadTab AddTab( string tabName )
        {
            RadTab tab = new RadTab();
            tab.Text = tabName;
            this.TopTabStrip.Tabs.Add( tab );
            return tab;
        }

        private void AddPageView( RadTab tab )
        {
            RadPageView pageView = new RadPageView();
            pageView.ID = tab.Text;
            this.TopMultiPage.PageViews.Add( pageView );
            tab.PageViewID = pageView.ID;
        }

        protected void TopMultiPage_PageViewCreated( object sender, RadMultiPageEventArgs e )
        {
            string userControlName = e.PageView.ID;// +"CS.ascx";
            if ( null != userControlName )
            {
                Control userControl = null;
                if ( "Admin".Equals( userControlName ) )
                {
                    userControl = Page.LoadControl( "AdminPage.ascx" );
                    userControl.ID = e.PageView.ID + "_userControl";
                }
                else if ( "Configure".Equals( userControlName ) )
                {
                    userControl = Page.LoadControl( "Configuration.ascx" );
                    userControl.ID = e.PageView.ID + "_userControl";
                }
                else if ( "Reports".Equals( userControlName ) )
                {
                    userControl = Page.LoadControl( "ReportsPage.ascx" );
                    userControl.ID = e.PageView.ID + "_userControl";
                }
                else if ( "Help".Equals( userControlName ) )
                {
                    userControl = Page.LoadControl( "HelpPage.ascx" );
                    userControl.ID = e.PageView.ID + "_userControl";
                }
                if ( null != userControl )
                    e.PageView.Controls.Add( userControl );
            }
        }

        protected void TopTabStrip_TabClick( object sender, RadTabStripEventArgs e )
        {
            AddPageView( e.Tab );
            e.Tab.PageView.Selected = true;
        }

ReportsPage.ascx:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadTreeView1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ReportPane" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadSplitter ID="ReportPageSplitter" Runat="server" Skin="Office2007"

Height="100%" Width="100%" >

<telerik:RadPane ID="LeftPane" Runat="server" Height="" Width="30%">

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" Runat="server" CollapseMode="Both" />

<telerik:RadPane ID="RightPane" runat="server" Height="">

</telerik:RadPane>

</telerik:RadSplitter>

ReportsPage.cs:

        protected void Page_Load( object sender, EventArgs e )
        {
            if ( !Page.IsPostBack )
            {
                // Check for session variables to determine what to display in each pane.
                object obj = Session[ "ReportMode" ];
                string reportMode = "";
                if ( null == obj )
                {
                    reportMode = "ReportSelection";
                    Session[ "ReportMode" ] = reportMode;
                }

                if ( "ReportSelection".Equals( reportMode ) )
                {
                    // Show the report selection control.
                    ReportSelection rptSelect = (ReportSelection) LoadControl( "ReportSelection.ascx" );
                    this.LeftPane.Controls.Add( rptSelect );
                }
                else
                {
                    // Show the report parameter control.
                    ReportParameters rptParms = (ReportParameters) LoadControl( "ReportParameters.ascx" );
                    this.LeftPane.Controls.Add( rptParms );
                }
            }
        }

ReportSelection.ascx:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
</telerik:RadAjaxManagerProxy>
<telerik:RadTreeView ID="RptSelectTreeView" Runat="server" Skin="Office2007"
    onnodeclick="RptSelectTreeView_NodeClick">
</telerik:RadTreeView>

ReportSelection.cs:

        protected void Page_Load( object sender, EventArgs e )
        {
            if ( !Page.IsPostBack )
            {
                // Build the tree.
                // TODO - build this based on info from the database.
                RadTreeNode rootNode = new RadTreeNode( "Reports" );
                rootNode.PostBack = false;
                rootNode.Expanded = true;
                RadTreeNode directReportsNode = new RadTreeNode( "Category 1" );
                directReportsNode.PostBack = false;
                RadTreeNode childNode = new RadTreeNode( "Report1" );
                directReportsNode.Nodes.Add( childNode );
                childNode = new RadTreeNode( "Report2" );
                directReportsNode.Nodes.Add( childNode );
                rootNode.Nodes.Add( directReportsNode );
                this.RptSelectTreeView.Nodes.Add( rootNode );
            }
        }

[Jim]

I left out part of the Mainpage.aspx for the ajax manager:

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="TopTabStrip">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="TopTabStrip" />
                        <telerik:AjaxUpdatedControl ControlID="TopMultiPage" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="TopMultiPage">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="TopMultiPage" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadScriptManager ID="ScriptManager" runat="server" />
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"
            height="75px" width="75px">
            <img alt="Loading..."
                src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                style="border:0px;" />
        </telerik:RadAjaxLoadingPanel>

[Jim]

Hi All,

I resolved the issue by adding the following to the AddTab method in the mainpage code:

RadPageView pageView = new RadPageView();
pageView.ID = tabValue;
this.TopMultiPage.PageViews.Add( pageView );

I also removed the call to AddPageView in the OnPageLoad method.

Jim