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

DynamicMultiPage with a TabStrip and a LoginView

2 Answers 151 Views

TabStrip

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

Pascal asked on 10 Oct 2008, 03:25 PM

I am using the TabStrip to dynamically add PageView's to my MultiView as shown in the "RadTabStrip and RadPanelBar for ASP.NET AJAX – Overview" training tutorial.

Everything works 100% fine, until I put it into a LoginView. Once the TabStrip and MultiPage are located inside a LoginView within the AnonymousTemplate (or any other "view" of the LoginView) and I run the code, the first click on any tab causes a Postback to be fired instead of an Ajax-Postback call. Once the postback is completed (i.e. the page is "reloaded") and I click on another tab (not the one I previously clicked), then the Ajax-Postback call happens as it should have the first time. If I place the TabStrip and the Multiview outside the LoginView, the Ajax-Postback call(s) take place as designed.

Has anybody had this kind of an issue before? I do not quite understand why the "first" postback is not handled by the Ajax library ... does anybody have an explanation for this?

I have modified the tutorial code in order to reproduce the error. I have placed the TabStrip and the MultiView within a WebControl. I have removed the comments from the tutorial code. Here ist the code that reproduces the error:

DynamicMultiPage.aspx

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicMultiPage.aspx.cs" Inherits="DynamicMultiPage" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register TagPrefix="UC" TagName="DynamicMultiPage" Src="DynamicMultiPage.ascx" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager runat="server"></telerik:RadScriptManager> 
        
                    <telerik:RadAjaxManager runat="server"></telerik:RadAjaxManager> 
        
                    <asp:LoginView runat="server" ID="LoginView1"> 
        
                    <AnonymousTemplate> 
        
                        <UC:DynamicMultiPage runat="server" ID="DynamicMultiPage1" /> 
        
                    </AnonymousTemplate> 
        
                    </asp:LoginView> 
        
                </form> 
        
            </body> 
        
            </html>

DynamicMultiPage.aspx.cs

    
            using System; 
        
            using System.Web.UI.WebControls; 
        
            using Telerik.Web.UI; 
        
            partial class DynamicMultiPage : System.Web.UI.Page 
        
            { 
        
            }

DynamicMultiPage.ascx

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeFile="DynamicMultiPage.ascx.cs" Inherits="DynamicMultiPage" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script type="text/javascript"> 
        
                function onTabSelecting(sender, args) { 
        
                    if (args.get_tab().get_pageViewID()) { 
        
                        args.get_tab().set_postBack(false); 
        
                    } 
        
                } 
        
            </script> 
        
            <telerik:RadAjaxManagerProxy runat="server"> 
        
                <AjaxSettings> 
        
                    <telerik:AjaxSetting AjaxControlID="RadTabStrip1"> 
        
                        <UpdatedControls> 
        
                            <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
        
                            <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" /> 
        
                        </UpdatedControls> 
        
                    </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
            </telerik:RadAjaxManagerProxy> 
        
            <div> 
        
                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="2" MultiPageID="RadMultiPage1" OnClientTabSelecting="onTabSelecting" OnTabClick="RadTabStrip1_TabClick"> 
        
                    <Tabs> 
        
                        <telerik:RadTab runat="server" Text="Business" PageViewID="RadPageView1"> 
        
                        </telerik:RadTab> 
        
                        <telerik:RadTab runat="server" Text="Employees" PageViewID="RadPageView2"> 
        
                        </telerik:RadTab> 
        
                        <telerik:RadTab runat="server" Text="Customers" PageViewID="RadPageView3" Selected="True"> 
        
                        </telerik:RadTab> 
        
                    </Tabs> 
        
                </telerik:RadTabStrip> 
        
                &nbsp; 
        
                <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated"> 
        
                </telerik:RadMultiPage> 
        
            </div>

DynamicMultiPage.ascx.cs

    
            using System; 
        
            using System.Collections.Generic; 
        
            using System.Linq; 
        
            using System.Web; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using Telerik.Web.UI; 
        
            public partial class DynamicMultiPage : System.Web.UI.UserControl 
        
            { 
        
                bool newPageView = false; 
        
                protected void Page_Load(object sender, System.EventArgs e) 
        
                { 
        
                    if (!(Page.IsPostBack)) 
        
                        ViewState["sequence"] = "0"; 
        
                } 
        
                protected void RadTabStrip1_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e) 
        
                { 
        
                    e.Tab.PageViewID = AddPageView(e.Tab.Text); 
        
                    e.Tab.PageView.Selected = true; 
        
                } 
        
                private string AddPageView(string pageViewID) 
        
                { 
        
                    RadPageView pageView = new RadPageView(); 
        
                    pageView.ID = pageViewID; 
        
                    newPageView = true; 
        
                    RadMultiPage1.PageViews.Add(pageView); 
        
                    return pageViewID; 
        
                } 
        
                protected void RadMultiPage1_PageViewCreated(object sender, Telerik.Web.UI.RadMultiPageEventArgs e) 
        
                { 
        
                    Label contentLabel = new Label(); 
        
                    contentLabel.ID = e.PageView.ID + "content"; 
        
                    int sequence = 0; 
        
                    if ((newPageView)) 
        
                    { 
        
                        sequence = Convert.ToInt32(ViewState["sequence"]) + 1; 
        
                        ViewState["sequence"] = Convert.ToString(sequence); 
        
                    } 
        
                    else 
        
                    { 
        
                        sequence = e.PageView.MultiPage.PageViews.Count; 
        
                    } 
        
                    contentLabel.Text = RadTabStrip1.Tabs[RadTabStrip1.SelectedIndex].Text + " added as page # " + Convert.ToString(sequence); 
        
                    e.PageView.Controls.Add(contentLabel); 
        
                } 
        
            }

2 Answers, 1 is accepted

answered on 13 Oct 2008, 06:58 AM

After quite some debugging and a lot of "pulling my hair out", I managed to find out "how to get it to work" and after a bit of research into this "behaviour" I managed to "assume" WHY it happens.

The problem seems to be that the first time the page is loaded (i.e. no postback and thus no loading of the viewstate), that the "EnsureChildControls" of the LoginView is called "to late". And since the EnsureChildControls method is protected, the only way to force the control to "EnsureChildControls" is to do a FindControl on it (or you could call any other method or property of the control that has any "influence" on it's child controls). Thus the code behind for the DynamicMultiPage.aspx file above would look like this:

DynamicMultiPage.aspx.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 DynamicMultiPage : System.Web.UI.Page 
        
            { 
        
                protected override void OnLoad(EventArgs e) 
        
                { 
        
                    if (!IsPostBack) 
        
                    { 
        
                        Control c = LoginView1.FindControl("Bla"); 
        
                    } 
        
                    base.OnLoad(e); 
        
                } 
        
            }

Note: The "FindControl" line above can either be placed in the OnInit or in the OnLoad event. It makes no difference. And the reason for the "IsPostback" check is that we only need to "force" the "EnsureChildControls" to be called the first time the page loads.

Another note: The problem descripbed above is an issue with ALL TEMPLATED CONTROLS. So this behaviour can be reproduced with any Templated Control.

I hope this helps some other frustrated people out there!

answered on 17 Jun 2014, 04:51 PM

This can easily be done also through the client-side events of the RadTabStrip. You would setup your tabstip as follows.

<asp:LoginView ID="LoginView1" runat="server">

<LoggedInTemplate>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" OnClientTabSelected="ClientTabSelected"

ReorderTabsOnSelect="true" SelectedIndex="0" Width="100%">

<Tabs>

<telerik:RadTab Text="General" Value="0"></telerik:RadTab>

<telerik:RadTab Text="Make" Value="1"></telerik:RadTab>

<telerik:RadTab Text="Model" Value="2"></telerik:RadTab>

<telerik:RadTab Text="Other" Value="3"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</LoggedInTemplate>

</asp:LoginView>

Because the LoginView control breaks the client-side of the tab strip, you can work around this problem by explicitly changing the selected index of the multipage control as follows.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

//<![CDATA[

function ClientTabSelected(sender, eventArgs) {

var tab = eventArgs.get_tab();

var tabIndex = tab.get_index();

var RadMultiPage1 = $find("<%= RadMultiPage1.ClientID %>");

RadMultiPage1.set_selectedIndex(tabIndex);

}

//]]>

</script>

</telerik:RadCodeBlock>

Hope this helps someone.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

DynamicMultiPage with a TabStrip and a LoginView

2 Answers, 1 is accepted