RadTabStrip w/ Dynamically Created RadMultiPages wont show all the pages and loses track of which tab is selected.

10 posts, 0 answers
  1. Joshua
    Joshua avatar
    35 posts
    Member since:
    May 2012

    Posted 07 Aug 2013 Link to this post

    So this is really simple.  I want to load the same ascx 'x' number of times.  And based on the Session Information, load the page a certain way.  And I have that functionality working perfectly.

    However, what happens is while clicking on the tabs.  The radpageviews will no longer load, or be stuck on a previous page. Also, I noticed sometimes when the page renders the multipage it's a child of an already existing multipage.

    Below is code for the entire project.  Any help or a way to work with this idea would be fantastic.  Thanks.


    All the code I got to load the dynamic pages comes from the online demo.   Thanks!

    default.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            function onTabSelecting(sender, args) {
                if (args.get_tab().get_pageViewID()) {
                    args.get_tab().set_postBack(false);
                }
            }
        </script>
        <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" Skin="MetroTouch">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" EnablePageHeadUpdate="true">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
            Skin="MetroTouch" Align="Justify" Orientation="VerticalLeft" OnTabClick="RadTabStrip1_TabClick"
            Width="1000" OnClientTabSelecting="onTabSelecting">
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" OnPageViewCreated="RadMultiPage1_PageViewCreated">
        </telerik:RadMultiPage>
        <div>
        </div>
        </form>
    </body>
    </html>

    default.aspx.cs
    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;

    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Session["RSession"] = new RSession.UserSession();
                RadTabStrip_Populating();
            }
        }

        protected void RadTabStrip_Populating()
        {
            string[] tabValues = { "String|A M A|ApplePumpkinButter|MyChoices", "Decimal|Base Happy Go Lucky turtle|BaseHappyGoLuckyturtle|MyHappyFunDay", "Decimal|Base Mountain Slopes|BaseMountainSlopes|MyFunWithTabs", "Decimal|Base Ski Slopes|BaseSkiSlopes|MyFunWithTabs", "Decimal|BaseSkiSlopeAdjustedHight|BaseSkiSlopeAdjustedHight|MoreFunWithTabs" };
            foreach (string tv in tabValues)
            {
                RadTab RT = new RadTab();
                RT.Text = tv.Split('|')[1];
                RT.Value = tv;
                RT.Width = Unit.Pixel(300);
                RadTabStrip1.Tabs.Add(RT);
            }
        }

        protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            string userControlName = "dynamicbuilder.ascx";

            Control userControl = Page.LoadControl(userControlName);
            userControl.ID = e.PageView.ID.Replace(" ", "").Replace("|", "") + "_userControl";

            e.PageView.Controls.Add(userControl);
        }

        private void AddPageView(RadTab tab)
        {
            RadPageView pageView = new RadPageView();
            pageView.ID = tab.Text.Replace(" ", "");
            RadMultiPage1.PageViews.Add(pageView);
            tab.PageViewID = pageView.ID;
        }

        protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
        {
            ((RSession.UserSession)Session["RSession"]).CurrentParameterDT = e.Tab.Value.ToString().Split('|')[0].ToString();
            ((RSession.UserSession)Session["RSession"]).CurrentParameterFLH = e.Tab.Value.ToString().Split('|')[1].ToString();
            ((RSession.UserSession)Session["RSession"]).CurrentParameterFName = e.Tab.Value.ToString().Split('|')[2].ToString();
            ((RSession.UserSession)Session["RSession"]).CurrentParameterTName = e.Tab.Value.ToString().Split('|')[3].ToString();
            AddPageView(e.Tab);
            e.Tab.PageView.Selected = true;
        }
    }

    dynamicbuilder.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="dynamicbuilder.ascx.cs"
        Inherits="dynamicbuilder" %>
    <asp:Panel ID="Panel_Dec" runat="server" Visible="false">
        <div style="padding-top: 10px;">
            <div style="float: left; padding-left: 15px;">
                <asp:Label runat="server" ID="Label_NumericStartingValue"></asp:Label>
            </div>
            <br />
            <div style="padding-top: 10px;">
                <div style="float: left; padding-left: 15px;">
                    <asp:Label runat="server" ID="Label_NumericEndingValue"></asp:Label>
                     
                </div>
    </asp:Panel>
    <asp:Panel ID="Panel_NV" runat="server" Visible="false">
        <asp:Label runat="server" ID="Label2" Text="nvarchar"></asp:Label>
    </asp:Panel>
    <asp:Panel ID="Panel_DT" runat="server" Visible="false">
        <div style="padding-top: 10px;">
            <div style="float: left; padding-left: 15px;">
                <asp:Label runat="server" ID="Label_StartDate"></asp:Label>
            </div>
            <br />
            <br />
            <div style="float: left; padding-left: 15px;">
                <asp:Label runat="server" ID="Label_EndDate"></asp:Label>
            </div>
        </div>
    </asp:Panel>
    <asp:Panel ID="Panel_SP" runat="server" Visible="false">
        <asp:Label runat="server" ID="Label4" Text="Special"></asp:Label>
    </asp:Panel>

    dynamicbuilder.ascx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class dynamicbuilder : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
            HidePanels();
            string casestatement = ((RSession.UserSession)Session["RSession"]).CurrentParameterDT.ToLower();
            switch (casestatement)
            {
                case ("string"):
                    if (SpecialFields.Contains(((RSession.UserSession)Session["RSession"]).CurrentParameterFName.ToLower()))
                    {
                        Process_Special();
                    }
                    else
                    {
                        Process_NVarChar();
                    }
                    break;
                case ("integer"):
                    Process_Decimal();
                    break;
                case ("decimal"):
                    Process_Decimal();
                    break;
                case ("datetime"):
                    Process_DateTime();
                    break;
     
            }
        }
     
        protected void HidePanels()
        {
            string casestatement = ((RSession.UserSession)Session["RSession"]).CurrentParameterDT.ToLower();
            switch (casestatement)
            {
                case ("string"):
                    if (SpecialFields.Contains(((RSession.UserSession)Session["RSession"]).CurrentParameterFName.ToLower()))
                    {
                        Panel_NV.Visible = false;
                        Panel_DT.Visible = false;
                        Panel_Dec.Visible = false;
                        Panel_SP.Visible = true;
                    }
                    else
                    {
                        Panel_NV.Visible = true;
                        Panel_DT.Visible = false;
                        Panel_Dec.Visible = false;
                        Panel_SP.Visible = false;
                    }
                    break;
                case ("integer"):
     
                    Panel_NV.Visible = false;
                    Panel_DT.Visible = false;
                    Panel_Dec.Visible = true;
                    Panel_SP.Visible = false;
                    break;
                case ("decimal"):
                    Panel_NV.Visible = false;
                    Panel_DT.Visible = false;
                    Panel_Dec.Visible = true;
                    Panel_SP.Visible = false;
                    break;
                case ("datetime"):
                    Panel_NV.Visible = false;
                    Panel_DT.Visible = true;
                    Panel_Dec.Visible = false;
                    Panel_SP.Visible = false;
                    break;
            }
     
        }
     
        protected void Process_NVarChar()
        {
     
     
        }
        protected void Process_DateTime()
        {
            Label_StartDate.Text = ((RSession.UserSession)Session["RSession"]).CurrentParameterFLH + ": Starting Date";
            Label_EndDate.Text = ((RSession.UserSession)Session["RSession"]).CurrentParameterFLH + ": Ending Date";
        }
        protected void Process_Decimal()
        {
     
            Label_NumericStartingValue.Text = ((RSession.UserSession)Session["RSession"]).CurrentParameterFLH + ": Starting Value";
            Label_NumericEndingValue.Text = ((RSession.UserSession)Session["RSession"]).CurrentParameterFLH + ": Ending Value";
        }
        protected void Process_Special()
        {
     
     
        }
     
        protected string[] SpecialFields = { "mn", "ve" };
    }

    SessionControl.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
     
    public static class RSession
    {
     
        public class UserSession
        {
     
            public string CurrentParameterTName
            {
                get;
                set;
            }
     
            public string CurrentParameterFName
            {
                get;
                set;
            }
     
            public string CurrentParameterFLH
            {
                get;
                set;
            }
            public string CurrentParameterDT
            {
                get;
                set;
            }
     
        }
    }


  2. Joshua
    Joshua avatar
    35 posts
    Member since:
    May 2012

    Posted 13 Aug 2013 Link to this post

    Hi, is it possible to get anybody to chime in on this?  It's an entire solution i figured it would be a easy one to point out.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joshua
    Joshua avatar
    35 posts
    Member since:
    May 2012

    Posted 19 Aug 2013 Link to this post

    Anybody?
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 22 Aug 2013 Link to this post

    Hello Joshua,

    Please check if there are any and errors that are thrown on the page when you are clicking on the tabs. Another approach that you can try out as well would be to disable the ajax on the page and check if you get any exception( you can use the EnableAJAX="false" property for instance.

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Joshua
    Joshua avatar
    35 posts
    Member since:
    May 2012

    Posted 22 Aug 2013 Link to this post

    Hi, i've tried EnableAJAX="false" in the ajaxmanager and the same errors occur.

    Also here is no errors thrown when clicking through the tab.  The entire solution is provided above.  I'd happily upload a .zip file but the forums cannot accept it.

    Thanks.
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 23 Aug 2013 Link to this post

    Hello Joshua,

    I tested the code that you provided but I am not able to get the problematic behavior that you describe in your first post. I get different server side exceptions, however, once I disable the ajax. Can you please provide an image file with the exception that you get from your side (when you disable the ajax) so that we can confirm that we are looking at the one and the same issue?

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Joshua
    Joshua avatar
    35 posts
    Member since:
    May 2012

    Posted 23 Aug 2013 Link to this post

    The problem is simply produced by clicking on each one of the tabs and then clicking on each one of the tabs in reverse order.  I've listed the steps in images.  In step5 you'll clearly see the "Base Happy Go Lucky Turtle" tab is clicked and the dynamic ascx that is loaded is still base ski slopes.  Also, please share the server side errors you're receiving, but i do not receive any..

  9. Joshua
    Joshua avatar
    35 posts
    Member since:
    May 2012

    Posted 26 Aug 2013 Link to this post

    So i've determine is based on the dynamicbuilder.ascx loading before the next tabclick and i'm also not sure why that onTabSelecting preventing postback is still causing dynamicbuilder.ascx to load.

    So as a test I added this to SessionControl.cs

    public bool UpdateMultiPage
           {
     
               get;
               set;
           }


    then to default.aspx.cs

    I added this

    protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
        {
            ((RSession.UserSession)Session["RSession"]).UpdateMultiPage = true;
    ((RSession.UserSession)Session["RSession"]).CurrentParameterDT = e.Tab.Value.ToString().Split('|')[0].ToString();
            ((RSession.UserSession)Session["RSession"]).CurrentParameterFLH = e.Tab.Value.ToString().Split('|')[1].ToString();
            ((RSession.UserSession)Session["RSession"]).CurrentParameterFName = e.Tab.Value.ToString().Split('|')[2].ToString();
            ((RSession.UserSession)Session["RSession"]).CurrentParameterTName = e.Tab.Value.ToString().Split('|')[3].ToString();
            AddPageView(e.Tab);
            e.Tab.PageView.Selected = true;
     
    ((RSession.UserSession)Session["RSession"]).UpdateMultiPage = false;
    }


    then to dynamicbuilder.ascx.cs

    if (IsPostBack && ((RSession.UserSession)Session["RSession"]).UpdateMultiPage == true)
    {
     
    }


    And it works perfectly fine.

    Why is the multipages loading multiple times when postback is suppose to be stopped?
  10. Joshua
    Joshua avatar
    35 posts
    Member since:
    May 2012

    Posted 07 Sep 2013 Link to this post

    I'm just trying to follow up on this.  I'd really like to get an explanation.


    Why is the multipages loading multiple times when postback is suppose to be stopped?
  11. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 12 Nov 2013 Link to this post

    Hello Joshua,

    Since you have asked couple of questions in different posts I shall start to answer them retrospectively:

    The reason why some of the newly added pageview are rendered as children of already existing pageviews is the invalid html in the dynamicbuilder user control. There are unclosed div tags.

    The problem with the incorrect information for the currently selected pageview is in fact related to the custom implementation that you are using. The problem lies in the fact that the Session["RSession"] stores the values from the last selected tab. So when the user control are recreated for the already added pageviews they are configured with the value from the last selected tab (and not with the information from their respective tab). As a solution you could store the ID of each pageview in the session and associate with it the corresponding settings. A sample project implementing this approach is attached.

    Regarding your last question, which is why the user controls in the already loaded pageview are recreated upon postback, this behavior is caused by the fact that these user controls are added in the PageViewCreated event which is fired for all pageviews which are recreated from the ViewState as well as all pageviews which are later added to the PageViewsCollection. The following lines of code:
    function onTabSelecting(sender, args) {
                if (args.get_tab().get_pageViewID()) {
                    args.get_tab().set_postBack(false);
                }
            }

    will only prevent a postback to happen for a tab which already has pageview.

    Regards,
    Dimitar Terziev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017