Trouble with TabStrip with MultiPage using asp:panel to load controls dynamically.

3 posts, 0 answers
  1. Joh
    Joh avatar
    6 posts
    Member since:
    Jun 2010

    Posted 16 Aug 2011 Link to this post

    I can't figure out how to get the postback form not making the controls hidden on posting.
    Example code:
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="uc1" TagName="UserControl1" Src="~/Controls/UserControl1.ascx" %>
    <%@ Register TagPrefix="uc2" TagName="UserControl2" Src="~/Controls/UserControl2.ascx" %>
    <%@ Register TagPrefix="uc3" TagName="UserControl3" Src="~/Controls/UserControl3.ascx" %>
    <%@ Register TagPrefix="uc4" TagName="UserControl4" Src="~/Controls/UserControl4.ascx" %>
    ................
    ................
     
           <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
               <AjaxSettings>
                   <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                       <UpdatedControls>
                           <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                           <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" />
                       </UpdatedControls>
                   </telerik:AjaxSetting>
                   <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                       <UpdatedControls>
                           <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" />
                       </UpdatedControls>
                   </telerik:AjaxSetting>
               </AjaxSettings>
           </telerik:RadAjaxManager>
           <script type="text/javascript">
               function onTabSelecting(sender, args) {
                   if (args.get_tab().get_pageViewID()) {
                       args.get_tab().set_postBack(false);
                   }
               }
            </script>
            <telerik:RadTabStrip AutoPostBack="false" OnClientTabSelecting="onTabSelecting" ID="RadTabStrip1" SelectedIndex="0" runat="server"
            MultiPageID="RadMultiPage1" OnTabClick="RadTabStrip1_TabClick" Orientation="HorizontalTop" ScrollChildren="true" ScrollButtonsPosition="Middle"
            PerTabScrolling="true">     
                <Tabs>
                    <telerik:RadTab runat="server" Text="Class Schedule" Value="0">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Transfer Work" Value="1">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="CLASS/GE" Value="2">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Academic History" Value="3">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
             <%--ID="RadTabStrip1" OnTabClick="RadTabStrip1_TabClick" SelectedIndex="0" runat="server" Orientation="HorizontalTop" Align="Right" 
                AutoPostBack="false">--%>
           <%-- <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated"
            ScrollBars="Auto">--%>
             <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
                <telerik:RadPageView ID="RadPageView1" runat="server">
                    <%--<uc1:UserControl1 ID="ucUserControl1" runat="server" Visible="false"></uc1:UserControl1>--%>
                    <asp:Panel ID="pn0UserControl3" runat="server"></asp:Panel>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView2" runat="server">
                    <%--<uc2:UserControl2 ID="ucUserControl2" runat="server" Visible="false"></uc2:UserControl2>--%>
                    <asp:Panel ID="pn1UserControl2" runat="server"></asp:Panel>               
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView3" runat="server">
                    <%--<uc3:UserControl3 ID="ucUserControl3" runat="server" Visible="false"></uc3:UserControl3>--%>
                    <asp:Panel ID="pn2UserControl1" runat="server"></asp:Panel>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView4" runat="server">
                    <%--<uc4:UserControl4 ID="ucUserControl4" runat="server" Visible="false"></uc4:UserControl4>--%>
                    <asp:Panel ID="pn3UserControl4" runat="server"></asp:Panel>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
             
            <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
            </telerik:RadAjaxLoadingPanel>
    ...........................................
    ..........................................
    Control ctrl0, ctrl1, ctrl2, ctrl3;
     
        protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
        {
            switch (e.Tab.Index)
            {
                case 0:
                    ctrl0 = Page.LoadControl("~/Controls/UserControl1.ascx");
                    pn1UserControl2 = RadMultiPage1.FindControl("pn1UserControl2") as Panel;
                    pn1UserControl2.Controls.Clear();
     
                    pn2UserControl3 = RadMultiPage1.FindControl("pn2UserControl3") as Panel;
                    pn2UserControl3.Controls.Clear();
                     
                    pn3UserControl4 = RadMultiPage1.FindControl("pn3UserControl4") as Panel;
                    pn3UserControl4.Controls.Clear();
                     
                    pn0UserControl1 = RadMultiPage1.FindControl("pn0UserControl1") as Panel;
                    pn0UserControl1.Controls.Add(ctrl0);
     
                    break;
     
                case 1:
                    ctrl1 = Page.LoadControl("~/Controls/UserControl2.ascx");
     
                    pn0UserControl1 = RadMultiPage1.FindControl("pn0UserControl1") as Panel;
                    pn0UserControl1.Controls.Clear();
     
                    pn2UserControl3 = RadMultiPage1.FindControl("pn2UserControl3") as Panel;
                    pn2UserControl3.Controls.Clear();
     
                    pn3UserControl4 = RadMultiPage1.FindControl("pn3UserControl4") as Panel;
                    pn3UserControl4.Controls.Clear();
     
                    pn1UserControl2 = RadMultiPage1.FindControl("pn1UserControl2") as Panel;
                    pn1UserControl2.Controls.Add(ctrl1);
     
                    break;
     
                case 2:
                    ctrl2 = Page.LoadControl("~/Controls/UserControl3.ascx");
     
                    pn0UserControl1 = RadMultiPage1.FindControl("pn0UserControl1") as Panel;
                    pn0UserControl1.Controls.Clear();
     
                    pn1UserControl2 = RadMultiPage1.FindControl("pn1UserControl2") as Panel;
                    pn1UserControl2.Controls.Clear();
     
                    pn3UserControl4 = RadMultiPage1.FindControl("pn3UserControl4") as Panel;
                    pn3UserControl4.Controls.Clear();
     
                    pn2UserControl3 = RadMultiPage1.FindControl("pn2UserControl3") as Panel;
                    pn2UserControl3.Controls.Add(ctrl2);
     
                    break;
     
                case 3:
                    ctrl3 = Page.LoadControl("~/Controls/UserControl4.ascx");
     
                    pn0UserControl1 = RadMultiPage1.FindControl("pn0UserControl1") as Panel;
                    pn0UserControl1.Controls.Clear();
     
                    pn1UserControl2 = RadMultiPage1.FindControl("pn1UserControl2") as Panel;
                    pn1UserControl2.Controls.Clear();
     
                    pn2UserControl3 = RadMultiPage1.FindControl("pn2UserControl3") as Panel;
                    pn2UserControl3.Controls.Clear();
     
                    pn3UserControl4 = RadMultiPage1.FindControl("pn3UserControl4") as Panel;
                    pn2UserControl3.Controls.Add(ctrl3);
     
                    break;
            }
    The controls consists of RadListView, grids etc.  I even tried the Demo
    Can't seem to figure this out... The other Demo doesn't use RadTabStrip and wanted these dynamic complex controls to work.  Else I will have to split these to different pages.
  2. Rory
    Rory avatar
    159 posts
    Member since:
    Jul 2007

    Posted 19 Aug 2011 Link to this post

    Hi I am not sure of your scenario but when I load tab controls dynamically I use this code below and everything works fine.

    RadTab tab = new RadTab();
    tab.Text = TitleText;
    tab.Height = System.Web.UI.WebControls.Unit.Pixel(25);
    tab.Value = newTabValue;
    RadTabStrip1.Tabs.Insert(1, tab);
    RadPageView pageView = new RadPageView();
    pageView.ID = newTabValue;
    pageView.Height = Unit.Percentage(100);
    RadMultiPage1.PageViews.Insert(1, pageView); 
    tab.Selected = true;
    pageView.Selected = true;                   
    pageView.Selected =
    true;


    Then I catch the Create Event for the pageview and assign the UserControl.

    void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
    {
        try
        {
            if (e.PageView.ID.IndexOf("Compose") > -1)
            {
                //ID looks like Compose_0 and its always 0
                string userControlName = "Controls/MailSender.ascx";
                Systema.Sims.Web.Claims.Controls.MailSender userControl = Page.LoadControl(userControlName) as Systema.Sims.Web.Claims.Controls.MailSender;
                userControl.ID = e.PageView.ID + "_userControl";
                userControl.MailID = 0;
                e.PageView.Controls.Add(userControl);
            }
            else if (e.PageView.ID.IndexOf("Read") > -1)
            {
                //ID looks like Read_101
                string strID = e.PageView.ID;
                strID = strID.Substring(strID.IndexOf("_") + 1);
                int id = Convert.ToInt32(strID);
                string userControlName = "Controls/MailReader.ascx";
                Systema.Sims.Web.Claims.Controls.MailReader userControl = Page.LoadControl(userControlName) as Systema.Sims.Web.Claims.Controls.MailReader;
                userControl.ID = e.PageView.ID + "_userControl";
                userControl.MailID = id;
                e.PageView.Controls.Add(userControl);
            }
          }
        catch (Exception ex)
        
            Hashtable errData = new Hashtable();
            errData["e.PageView.ID"] = e.PageView.ID;
            string err = SimsException.FormatErrorMessage("Error creating new page view.", errData);
            Exception ex2 = new Exception(err, ex);
            SimsException.ProcessException(ex2, ref lblMessages);
        }
    }


    Here is where I declared the Tab and MultiPage. I also make sure the TabStrip and Multipage are wrapped in an Ajaxified <DIV>.
    Good Luck!
    <telerik:RadTabStrip 
      ID="RadTabStrip1"
      runat="server"
      MultiPageID="RadMultiPage1"
      ClickSelectedTab="false"
      EnableTheming="false"
      EnableEmbeddedSkins="True"
      Skin="WebBlue"
      width="100%"
      SelectedIndex="0"
      Font-Size="12px"
      ScrollButtonsPosition="Right"
      ScrollChildren="true"
      CausesValidation="false"
      Height="25px"
      AutoPostBack="false">
    <Tabs>
    <telerik:RadTab runat="server" Font-Size="12px"  Font-Bold="true"
        AccessKey="I" Text=" Inbox" Value="Inbox_0">
    </telerik:RadTab>
    </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" CssClass="MultiPage" runat="server" SelectedIndex="0" Width="100%" Height="100%"

        <

     

     

    telerik:RadPageView ID="pvInbox" runat="server">

     

        ...Default Page View is a Grid not a UserControl.
        </

     

     

    telerik:RadPageView>

     

    </
    telerik:RadMultiPage>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joh
    Joh avatar
    6 posts
    Member since:
    Jun 2010

    Posted 22 Aug 2011 Link to this post

    I got a different method to work, I had to do this a bit differently since the other tabs actually allow data to be entered/manipulated so we have to clear out the old control:

    private const string BASE_CTRL = "~/Controls/";
     
    protected void Page_Load(object sender, EventArgs e)
        {       
                if (!Page.IsPostBack)
                {              
                    string controlPath = BASE_CTRL + "UserControl1.ascx";               
                    LastLoadedControl = controlPath;
                }
                LoadUserControl();
        }
     
    private void LoadUserControl()
    {
        string controlPath = LastLoadedControl;
     
        if (!string.IsNullOrEmpty(controlPath))
        {
            PlaceHolder1.Controls.Clear();
            UserControl uc = (UserControl)LoadControl(controlPath);
            PlaceHolder1.Controls.Add(uc);
        }
    }
     
     private string LastLoadedControl
    {
        get
        {
            return ViewState["LastLoaded"] as string;
        }
        set
        {
            ViewState["LastLoaded"] = value;
        }
    }
         
    protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
        {       
            string controlPath = string.Empty;
     
            switch (e.Tab.Index)
            {
                case 0:
                    controlPath = BASE_CTRL + "UserControl1.ascx";       
                    break;
     
                case 1:
                    controlPath = BASE_CTRL + "UserControl2.ascx";
                    break;
     
                case 2:
                    controlPath = BASE_CTRL + "UserControl3.ascx";
                    break;
     
                case 3:
                    controlPath = BASE_CTRL + "UserControl4.ascx";               
                    break;
            }
            LastLoadedControl = controlPath;
            LoadUserControl();
        }
    And I modified the View to be:

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1"
        OnTabClick="RadTabStrip1_TabClick" Orientation="HorizontalTop" ScrollChildren="true"
        ScrollButtonsPosition="Middle" PerTabScrolling="true" ClickSelectedTab="true">
        <Tabs>
            <telerik:RadTab runat="server" Text="UserControl1" Value="0">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="UserControl2" Value="1">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="UserControl3" Value="2">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="UserControl4" Value="3">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" RenderSelectedPageOnly="True">
        <telerik:RadPageView ID="rpvPlaceHolder1" runat="server">
            <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
Back to Top