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

Tabstrip with updatepanel

3 Answers 268 Views

TabStrip

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

Dorababu asked on 21 Jun 2012, 12:50 PM

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

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

<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

3 Answers, 1 is accepted

answered on 27 Jun 2012, 01:06 PM

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.