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

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

9 Answers 224 Views

TabStrip

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

Joshua asked on 07 Aug 2013, 09:15 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

<div style="float: left; padding-left: 15px;">

<asp:Label runat="server" ID="Label_EndDate"></asp:Label>

</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;

}

9 Answers, 1 is accepted

answered on 23 Aug 2013, 12:27 PM

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.

answered on 23 Aug 2013, 03:25 PM

step1.png

step2.png

step3.png

step4.png

step5.png

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..

answered on 26 Aug 2013, 07:33 PM

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?

answered on 12 Nov 2013, 04:13 PM

RadControlsWebSite1.zip

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