This is a migrated thread and some comments may be shown as answers.

Dynamic User Controls in MultipageView

2 Answers 249 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jim
Top achievements
Rank 1
Jim asked on 05 Mar 2009, 08:30 PM
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 ); 
            } 
        } 
 



2 Answers, 1 is accepted

Sort by
0
Jim
Top achievements
Rank 1
answered on 05 Mar 2009, 08:33 PM
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> 
 

0
Jim
Top achievements
Rank 1
answered on 05 Mar 2009, 08:49 PM
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
Tags
TabStrip
Asked by
Jim
Top achievements
Rank 1
Answers by
Jim
Top achievements
Rank 1
Share this question
or