Tabstrip with updatepanel

4 posts, 0 answers
  1. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 21 Jun 2012 Link to this post

    Hi all how can I work with tabstrip inside update panel. I have designed as follows
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="radTabStripMultiPage.aspx.cs"
        Inherits="radTabStripMultiPage" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!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>
        <link href="StyleSheet2.css" rel="stylesheet" type="text/css" />
        <link href="TabStrip.WebBlue.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="rad" runat="server">
        </telerik:RadScriptManager>
        <div>
            <telerik:RadWindowManager ID="RadWindowManager2" runat="server" VisibleOnPageLoad="false">
                <Shortcuts>
                    <telerik:WindowShortcut CommandName="CloseAll" Shortcut="Esc" />
                </Shortcuts>
            </telerik:RadWindowManager>
            <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Behavior="Default"
                InitialBehavior="None">
                <Windows>
                    <telerik:RadWindow ID="RadWindow1" runat="server" Behaviors="Default" InitialBehaviors="None"
                        OpenerElementID="btn" Width="650" Height="480" VisibleOnPageLoad="false">
                        <ContentTemplate>
                            <telerik:RadComboBox ID="rdcmb" runat="server">
                                <Items>
                                    <telerik:RadComboBoxItem Text="One" Value="One" />
                                    <telerik:RadComboBoxItem Text="Two" Value="Two" />
                                    <telerik:RadComboBoxItem Text="Three" Value="Three" />
                                    <telerik:RadComboBoxItem Text="Four" Value="Four" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadTextBox ID="rdText" runat="server">
                            </telerik:RadTextBox>
                            <telerik:RadButton ID="radbtn" runat="server" Text="Save">
                            </telerik:RadButton>
                        </ContentTemplate>
                    </telerik:RadWindow>
                </Windows>
            </telerik:RadWindowManager>
            <asp:UpdatePanel ID="up1" runat="server">
                <ContentTemplate>
                    <telerik:RadTabStrip ID="rdtabEmployee" runat="server" MultiPageID="rdmpPersonal"
                        UnSelectChildren="True" Skin="WebBlue" EnableEmbeddedSkins="False" ClickSelectedTab="True"
                        SelectedIndex="0" OnTabClick="tabClick">
                        <Tabs>
                            <telerik:RadTab runat="server" Text="Personal" PageViewID="rdpgPersonal">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Contact" PageViewID="rdpgContact">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Salary" PageViewID="RadPageView1">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Bank" PageViewID="RadPageView2">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Taxes" SelectedIndex="0">
                                <Tabs>
                                    <telerik:RadTab runat="server" Text="Residence" PageViewID="rdpgResident">
                                    </telerik:RadTab>
                                    <telerik:RadTab runat="server" Text="Work" PageViewID="rdpgWork">
                                    </telerik:RadTab>
                                </Tabs>
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Demo">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Demo1">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Demo2">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Demo1">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTabStrip>
                    <telerik:RadMultiPage ID="rdmpPersonal" runat="server">
                        <telerik:RadPageView ID="rdpgPersonal" runat="server" Selected="true">
                            <telerik:RadPanelBar runat="server" ID="rdpnlPersonal" ExpandMode="FullExpandedItem"
                                Skin="Vista" EnableEmbeddedSkins="false" Width="550px">
                                <Items>
                                    <telerik:RadPanelItem Expanded="true" Text="Employee Personal Information" runat="server"
                                        Selected="true">
                                        <Items>
                                            <telerik:RadPanelItem Value="AccountInformation" runat="server">
                                                <ItemTemplate>
                                                    <label>
                                                        Demop
                                                    </label>
                                                    <telerik:RadButton ID="rdbtnwhAnother" Text="Add WithHolding" runat="server" ButtonType="LinkButton"
                                                        OnClick="rdbtnwhAnother_Click">
                                                    </telerik:RadButton>
                                                </ItemTemplate>
                                            </telerik:RadPanelItem>
                                        </Items>
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelBar>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="rdpgContact" runat="server">
                            <label>
                                Demo Contact
                            </label>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="RadPageView1" runat="server">
                            <label>
                                Salary Demo
                            </label>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="RadPageView2" runat="server">
                            <label>
                                Demo Bank
                            </label>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="rdpgResident" runat="server">
                            <label>
                                Resident Demo
                            </label>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="rdpgWork" runat="server">
                            <label>
                                Work Demo
                            </label>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="RadPageView3" runat="server">
                            <label>
                                Work Demo
                            </label>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="RadPageView4" runat="server">
                            <label>
                                Work Demo
                            </label>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="RadPageView5" runat="server">
                            <label>
                                Work Demo
                            </label>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="RadPageView6" runat="server">
                            <label>
                                Work Demo
                            </label>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="RadPageView7" runat="server">
                            <label>
                                Work Demo
                            </label>
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>
                </ContentTemplate>
            </asp:UpdatePanel>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Width="16px">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="rdbtnwhAnother">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadWindowManager1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="rdmpPersonal">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rdtabEmployee" />
                            <telerik:AjaxUpdatedControl ControlID="rdmpPersonal" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="rdtabEmployee">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rdtabEmployee" />
                            <telerik:AjaxUpdatedControl ControlID="rdmpPersonal" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
        </div>
        </form>
    </body>
    </html>

    This is my code


    protected void tabClick(object sender, RadTabStripEventArgs e)
        {
            switch (e.Tab.Text)
            {
                case "Personal":
                    break;
            }
            if (e.Tab.Text == "Taxes")
            {
                RadTab tab1 = rdtabEmployee.FindTabByText("Taxes");
                tab1.Selected = true;
                tab1.SelectedIndex = 0;
                RadPageView pv1 = rdmpPersonal.FindPageViewByID("rdpgResident");
                pv1.Selected = true;
            }
            if (e.Tab.Text == "Residence")
            {
                RadTab tab1 = rdtabEmployee.FindTabByText("Taxes");
                tab1.Selected = true;
                tab1.SelectedIndex = 0;
                RadPageView pv1 = rdmpPersonal.FindPageViewByID("rdpgResident");
                pv1.Selected = true;
            }
            if (e.Tab.Text == "Work")
            {
                RadTab tab1 = rdtabEmployee.FindTabByText("Taxes");
                tab1.Selected = true;
                tab1.SelectedIndex = 1;
                RadPageView pv1 = rdmpPersonal.FindPageViewByID("rdpgWork");
                pv1.Selected = true;
            }
        }

    But on clicking the tab activating only one i.e If i select Tab 2 and then Tab3 tab3 is not getting selected can any one help
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 26 Jun 2012 Link to this post

    Hi,

    The problem with the particular implementation is the existence of both RadAjaxManager and UpdatePanel. Please remove either the RadAjaxManager or the UpdatePanel and the problem should be resolved.

    All the best,
    Dimitar Terziev
    the Telerik team
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 26 Jun 2012 Link to this post

    Can't we do with both functionality working
  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 27 Jun 2012 Link to this post

    Hello,

    It's not supported to use both controls in this particular case because they are mutually exclusive. It's similar to put the existing UpdatePanel inside another UpdatePanel. Since all of the controls inside the update panel will perform an Ajax request and will be updated after that, the usage of RadAjaxManager is not only unnecessary, but more importantly is not supported because this way there will be two Ajax request which will interfere with one other.

    Regards,
    Dimitar Terziev
    the Telerik team
    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 their blog feed now.
Back to Top