[Solved] How can I update the RadTabStrip "external" from a LinkButton

[Jorge Saa-Gerbier]

Hi, Telerik Team
I have a complex scenario, I describe it in more detail:

I have a .aspx that has a TabStrip "external" ("RadTabStrip1") inside a RadAjaxPanel (Panel_TabStrip1) in which there are 5 tab, each one is a UserControl (.ascx), which represents 5 steps in a procedure, i.e. first, only the first tab is available (enabled), once all the validations have been made, you may go on to the second tab with one button (Next Step), and then it's available (enabled) the second tab.

The TabStrip "external" ("RadTabStrip1")  is made by using dynamic pageviews and user controls, i.e. Etapa01CS, Etapa02CS, Etapa03CS, Etapa04CS and Etapa05CS.

The code the .aspx is as below:

        <telerik:RadAjaxPanel
            runat="server"
            ID="Panel_TabStrip1"
            LoadingPanelID="LP_RadTabStrip1"
            >

          <telerik:RadTabStrip
                ID="RadTabStrip1"
                SelectedIndex="0"
                runat="server"
                MultiPageID="RadMultiPage1"
                CssClass="tabStrip"
                EnableEmbeddedSkins="False"
                Skin="Azul"
                >

          </telerik:RadTabStrip>

          <telerik:RadMultiPage
            ID="RadMultiPage1"
            SelectedIndex="0"
            runat="server"
            CssClass="multiPage"
            OnPageViewCreated="RadMultiPage1_PageViewCreated"
            >
          </telerik:RadMultiPage>

        </telerik:RadAjaxPanel>

And the code behind the .aspx is as below:

        protected void Page_Load(object sender, EventArgs e)
        {

            if (!Page.IsPostBack)
            {
                AddTab("Agencias - Fechas", true);
                RadPageView pageView = new RadPageView();
                pageView.ID = "Etapa01";
                RadMultiPage1.PageViews.Add(pageView);

                AddTab("Vehículos - Reservación", false);
                AddTab("Informaciones Suplementarias", false);
                AddTab("Su Presupuesto", false);
                AddTab("Sus coordenadas", false);
            }
        }
        private void AddTab(string tabName, bool enabled)
        {
            RadTab tab = new RadTab(tabName);
            tab.Enabled = enabled;
            RadTabStrip1.Tabs.Add(tab);
        }

        protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            Control pageViewContents = LoadControl(e.PageView.ID + "CS.ascx");
            pageViewContents.ID = e.PageView.ID + "CS";
            e.PageView.Controls.Add(pageViewContents);
        }

Here starts the problem!

This second tab (UserControl: Etapa02CS) has another TabStrip "internal" ("RadTabStrip2") made "staticaly" with seven tabs, all of them valid with no problem, each one of them is same UserControl (.ascx)  that show different consulting options to a database, showing different items according to the tab Selected.
Note:

• The TabStrip "internal" ("RadTabStrip2") is not inside RadAjaxPanel
• The TabStrip "internal" ("RadTabStrip2") is not child of the TabStrip "external" ("RadTabStrip1") e.i. it is independent.

<%@ Register TagPrefix="Ctl_00"  TagName="etapa02_00"       Src="~/Reservaciones/Etapa02/etapa02_00CS.ascx"%>          <telerik:RadTabStrip

ID="RadTabStrip2"

runat="server"

SelectedIndex="0"

MultiPageID="RadMultiPage2"

Skin="Office2007"

AutoPostBack="True"

>

<Tabs>

<telerik:RadTab runat="server" PageViewID="Etapa02_00" Text="Turismo">      </telerik:RadTab>

<telerik:RadTab runat="server" PageViewID="Etapa02_01" Text="Standard">     </telerik:RadTab>

<telerik:RadTab runat="server" PageViewID="Etapa02_02" Text="Todo Terreno"> </telerik:RadTab>

<telerik:RadTab runat="server" PageViewID="Etapa02_03" Text="Van">          </telerik:RadTab>

<telerik:RadTab runat="server" PageViewID="Etapa02_04" Text="Prestigio">    </telerik:RadTab>

<telerik:RadTab runat="server" PageViewID="Etapa02_05" Text="Automáticos">  </telerik:RadTab>

<telerik:RadTab runat="server" PageViewID="Etapa02_06" Text="Ecológicos">   </telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage

ID="RadMultiPage2"

SelectedIndex="0"

runat="server"

CssClass="multiPage2"

>

<telerik:RadPageView ID="Etapa02_00" runat="server"><Ctl_00:etapa02_00 RunAt="server" ID="Etapa02_00CS"/></telerik:RadPageView>

<telerik:RadPageView ID="Etapa02_01" runat="server"><Ctl_00:etapa02_00 RunAt="server" ID="Etapa02_01CS"/></telerik:RadPageView>

<telerik:RadPageView ID="Etapa02_02" runat="server"><Ctl_00:etapa02_00 RunAt="server" ID="Etapa02_02CS"/></telerik:RadPageView>

<telerik:RadPageView ID="Etapa02_03" runat="server"><Ctl_00:etapa02_00 RunAt="server" ID="Etapa02_03CS"/></telerik:RadPageView>

<telerik:RadPageView ID="Etapa02_04" runat="server"><Ctl_00:etapa02_00 RunAt="server" ID="Etapa02_04CS"/></telerik:RadPageView>

<telerik:RadPageView ID="Etapa02_05" runat="server"><Ctl_00:etapa02_00 RunAt="server" ID="Etapa02_05CS"/></telerik:RadPageView>

<telerik:RadPageView ID="Etapa02_06" runat="server"><Ctl_00:etapa02_00 RunAt="server" ID="Etapa02_06CS"/></telerik:RadPageView>

</telerik:RadMultiPage>

The code the Etapa02_00.ascx is as below:

<telerik:RadAjaxPanel
    ID="Ficha_Vehiculo"
    runat="server"
    LoadingPanelID="Loading_Ficha"
    onload="Page_Load"

    >

    <asp:Repeater
        ID="Repeater1"
        runat="server"
        OnItemDataBound="Repeater1_ItemDataBound"
        OnItemCommand="Repeater1_GetSelectedID"
        >
        <ItemTemplate>
            <div id="ficha_vehiculo_reserva" >
                <div class="col_izq" align="center">
                    <asp:Image ID="Image2" ImageUrl='<%#Eval("vh_picturename","/images/Vehicules/{0}")%>' runat="server" />
                </div>
                <div class="col_der">
                    <div style="margin-left:15px;" ><asp:Label ID="lbl_vh_name" runat="server" Text='<%# Eval("vh_name") %>' ForeColor="#99CCFF" Font-Size="14" ></asp:Label></div>
                    <ul>
                        <li>Categoria :   <asp:Label ID="lbl_vh_id_categoria" runat="server" Text='<%# Eval("Cat_nombre") %>'     ForeColor="#5398FF"  >    </asp:Label></li>
                        <li>Descripcion : <asp:Label ID="lbl_vh_Description"  runat="server" Text='<%# Eval("Vh_Description") %>' ForeColor="#5398FF"  ></asp:Label></li>
                    </ul>
                    <br />
                    <table width="300" border="0">
                      <tr>
                        <td width="300" align="right">
                            <a onclick='<%# "Mostrar_Vehiculo(" + Eval("vh_id_key") + " );" %>'>Ver Detalle... </a>
                        </td>
                      </tr>
                    </table>

                <asp:HiddenField ID="HiddenID" runat="server" Value='<%# Eval("vh_id_key") %>' />

                <table width="160" border="0">
                  <tr>
                    <td width="160">
                    <div align="right" style="padding-right:8px;">
                        <asp:LinkButton
                            ID="LinkButton1"
                            runat="server"
                            CommandArgument='<%# Eval("vh_id_key") %>'
                            CommandName="Select"
                            CssClass="LinkButton"
                            Width="160"
                            Height="30"
                            OnClick="Bt_Etapa02_Click"
                        />
                    </div>
                    </td>
                  </tr>
                </table>
              </div>
            <div style="clear:both"></div>

            </div>


          </ItemTemplate>
        </asp:Repeater>

    </telerik:RadAjaxPanel>

Inside the Repeater1_ItemDataBound, I add a LinkButton to each shown item, and the code behind is as below:

        protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType != ListItemType.Item && e.Item.ItemType != ListItemType.AlternatingItem)
                return;

            DataRowView row = (DataRowView)e.Item.DataItem;

            string tr_01 = row["Vh_precio_tr_01"].ToString();
            string tr_02 = row["Vh_precio_tr_02"].ToString();
            string tr_03 = row["Vh_precio_tr_03"].ToString();
            string tr_04 = row["Vh_precio_tr_04"].ToString();

            Calculo_Precio(tr_01, tr_02, tr_03, tr_04);
            ((LinkButton)e.Item.FindControl("LinkButton1")).Text = string.Format("{0:c}", precio) + "  ";

        }

I succeeded to "simulate" with the LinkButtons (of each shown item) the button (Next Step) of the TabStrip "external" ("RadTabStrip1").

The code behind (OnClick="Bt_Etapa02_Click") of this button to each shown item,is as below:

        protected void Bt_Etapa02_Click(object sender, EventArgs e)
        {
            GoToNextTab();
        }

        protected void GoToNextTab()
        {
            RadTabStrip tabStrip = (RadTabStrip)Page.FindControl("Ctl00$ContentPlaceHolder1$RadTabStrip1");
            RadTab Etapa03InfoTab = tabStrip.FindTabByText("Informaciones Suplementarias");
            Etapa03InfoTab.Enabled = true;
            Etapa03InfoTab.Selected = true;

            GoToNextPageView();
        }

        private void GoToNextPageView()
        {
            RadMultiPage multiPage = (RadMultiPage)Page.FindControl("Ctl00$ContentPlaceHolder1$RadMultiPage1");
            RadPageView Etapa03InfoPageView = multiPage.FindPageViewByID("Etapa03");
            if (Etapa03InfoPageView == null)
            {
                Etapa03InfoPageView = new RadPageView();
                Etapa03InfoPageView.ID = "Etapa03";
                multiPage.PageViews.Add(Etapa03InfoPageView);
            }
            Etapa03InfoPageView.Selected = true;
            Etapa03InfoPageView.Enabled = true;
        }

Here is the problem!He aqui el problema!
How can I update the TabStrip "external" ("RadTabStrip1") from Bt_Etapa02_Click

I need some help for impleting this.

Thanks for you help,
Jorge Saa-Gerbier

P.S. I'm a beginner in ASP.Net

[Sebastian]

Hello Jorge,

Thank you for the detailed explanation. If I understand your scenario correctly, you would like to update the external tabstrip from a button which resides inside a page view of the internal tabstrip's multipage - is that correct? If so, consider utilizing the client API of RadAjaxManager and its ajaxRequest method in particular as shown on this demo of the product:

http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/clientsideapi/defaultcs.aspx

The idea is to set the ajax manager as an initiator and the external tabstrip as an updated control via RadAjaxManager setting. Thus when you invoke the ajaxRequest method from the client, you can intercept the OnAjaxRequest event of the manager and refresh the outer tabstrip.

Best regards,

Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.