AJAX Tabs stack together when AsyncPostBackTrigger

Hello,

On my WebPage, there is a DropDownList shows a list of categories, when selected, a GridView show records based on that selected category.

for each row of the GridView, it shows AJAX Tabs with 3 TabPanels, user can click on each tab to view information.

the problem:

When I wire up the AsyncPostBackTrigger, between the DropDownList and GridView, and run it, the 3 tabs in each row are all stacked one on top of each other, If I don't wire up the Trigger, it shows OK.

Please refer to attached Code, and screenshots, the left side is before the wireup and hte right is after.

Anybody has encounted the same problem?

Please advise,

Thank you

1<asp:ScriptManager ID="ScriptManager1" runat="server">2</asp:ScriptManager>34<asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true">5<asp:ListItem Text="--Select a Category--" Value="0"></asp:ListItem>6<asp:ListItem Text="Category 1" Value="1"></asp:ListItem>7<asp:ListItem Text="Category 2" Value="2"></asp:ListItem>8<asp:ListItem Text="Category 3" Value="3"></asp:ListItem>9</asp:DropDownList>1011<br />1213<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always">14<Triggers>15<asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" />16</Triggers>17<ContentTemplate>18<asp:GridView ID="gdvResearch" runat="server" AllowSorting="True" AutoGenerateColumns="False"19DataKeyNames="ResearchID" Width="100%" EnableViewState="False">21<Columns>24<asp:TemplateField>25<ItemTemplate>26<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="445px" Width="100%">27<cc1:TabPanel ID="TabPanel1" runat="server" Width="100%">28<HeaderTemplate>29<asp:Label ID="lblTab1" runat="Server" Text="<%$Resources:tab.1%>"></asp:Label>30</HeaderTemplate>31<ContentTemplate>32<div>33<!-- Information in Tab1... -->34</div>35</ContentTemplate>36</cc1:TabPanel>37<cc1:TabPanel ID="TabPanel2" runat="server">38<HeaderTemplate>39<asp:Label ID="lblTab2" runat="Server" Text="<%$Resources:tab.2%>"></asp:Label>40</HeaderTemplate>41<ContentTemplate>42<div>43<!-- Information in Tab2... -->44</div>45</ContentTemplate>46</cc1:TabPanel>47<cc1:TabPanel ID="TabPanel3" runat="server">48<HeaderTemplate>49<asp:Label ID="lblTab3" runat="Server" Text="<%$Resources:tab.3%>"></asp:Label>50</HeaderTemplate>51<ContentTemplate>52<div>53<!-- Information in Tab3... -->54</div>55</ContentTemplate>56</cc1:TabPanel>57</cc1:TabContainer>58</ItemTemplate>59</asp:TemplateField>60</Columns>61</asp:GridView>62</ContentTemplate>63</asp:UpdatePanel>

Hi,

Would you mind posting your code again without line number? It's hard to eliminate them.

OK, there you go.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true"><asp:ListItem Text="--Select a Category--" Value="0"></asp:ListItem><asp:ListItem Text="Category 1" Value="1"></asp:ListItem><asp:ListItem Text="Category 2" Value="2"></asp:ListItem><asp:ListItem Text="Category 3" Value="3"></asp:ListItem></asp:DropDownList><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always"><Triggers><asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" /></Triggers><ContentTemplate><asp:GridView ID="gdvResearch" runat="server" AllowSorting="True" AutoGenerateColumns="False"DataKeyNames="ResearchID" Width="100%" EnableViewState="False" ><Columns><asp:TemplateField><ItemTemplate><cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="445px" Width="100%"><cc1:TabPanel ID="TabPanel1" runat="server" Width="100%"><HeaderTemplate><asp:Label ID="lblTab1" runat="Server" Text="<%$Resources:tab.1%>"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab1... --></div></ContentTemplate></cc1:TabPanel><cc1:TabPanel ID="TabPanel2" runat="server"><HeaderTemplate><asp:Label ID="lblTab2" runat="Server" Text="<%$Resources:tab.2%>"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab2... --></div></ContentTemplate></cc1:TabPanel><cc1:TabPanel ID="TabPanel3" runat="server"><HeaderTemplate><asp:Label ID="lblTab3" runat="Server" Text="<%$Resources:tab.3%>"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab3... --></div></ContentTemplate></cc1:TabPanel></cc1:TabContainer></ItemTemplate></asp:TemplateField></Columns></asp:GridView></ContentTemplate></asp:UpdatePanel>

I tried your code on my page, but can't reproduce the issue.

Here is my page, please try it to see if it works on your side.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { Northwind nt = new Northwind(); // the object used to get data from NorthWind database System.Data.DataTable dt = nt.GetBasicInformationOfAllEmployees(); gdvResearch.DataSource = dt; gdvResearch.DataBind(); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true"><asp:ListItem Text="--Select a Category--" Value="0"></asp:ListItem><asp:ListItem Text="Category 1" Value="1"></asp:ListItem><asp:ListItem Text="Category 2" Value="2"></asp:ListItem><asp:ListItem Text="Category 3" Value="3"></asp:ListItem></asp:DropDownList><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always"><Triggers><asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" /></Triggers><ContentTemplate><asp:GridView ID="gdvResearch" runat="server" AllowSorting="True" AutoGenerateColumns="False"Width="100%" EnableViewState="False" ><Columns><asp:TemplateField><ItemTemplate><ajaxtoolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="445px" Width="100%"><ajaxtoolkit:TabPanel ID="TabPanel1" runat="server" Width="100%"><HeaderTemplate><asp:Label ID="lblTab1" runat="Server" Text="aa"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab1... --></div></ContentTemplate></ajaxtoolkit:TabPanel><ajaxtoolkit:TabPanel ID="TabPanel2" runat="server"><HeaderTemplate><asp:Label ID="lblTab2" runat="Server" Text="bb"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab2... --></div></ContentTemplate></ajaxtoolkit:TabPanel><ajaxtoolkit:TabPanel ID="TabPanel3" runat="server"><HeaderTemplate><asp:Label ID="lblTab3" runat="Server" Text="cc"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab3... --></div></ContentTemplate></ajaxtoolkit:TabPanel></ajaxtoolkit:TabContainer></ItemTemplate></asp:TemplateField></Columns></asp:GridView></ContentTemplate></asp:UpdatePanel> </div> </form></body></html>

Just trying...

What if you wrap your updatepanel inside something with a fixed width, like a table... I think your gridview's width of 100% "isn't sure" where to take the 100%... Also try giving your TabContainer a fixed width (in px)...

AJAX TabPanels and user defined controls

Hi,

I've built a control in which I implement the behaviour described in this video:How Do I: Trigger an UpdatePanel Refresh from a DropDownList Control? Basically, I want to update the nodes of a TreeView when I change the item in a DropDownList.

This works great except if I load the control dynamically into a tab panel...In this case, the first SelectedIndexChanged event doesn't trigger anything and all of the following events trigger a full page postback...

So, to sum this up:

User control statically defined in a page -> OKUser control statically defined in a tab panel -> OK (it works when I put the code of the control inside the tab panel)User control dynamically loaded into a placeholder -> OK (using PlaceHolder1.Controls.Add(Page.LoadControl("WebUserControl.ascx"));)User control dynamically loaded into a tab panel -> NOT OK! (using both TabPanel1.Controls.Add(Page.LoadControl("WebUserControl.ascx")); and TabPanel1.ContentTemplate = Page.LoadTemplate("WebUserControl.ascx");)

I can't put the code of the control inside the tab panel statically (point 2 in the previous list) because the tab panels are being generated dynamically also...

Anyone has suggestions to solve this, please??

When are you adding these dynamically created controls? It sould be during the Page_Init event and not later (such as during the Page_Load).

I'm not adding the controls in the Page_Init as I can't do that...when my page first loads it has only a DropDownList with a list of options.

Then, when the selected option is changed, there is a postback (as the DropDownList has AutoPostBack = "True") and only then the tabs are created and the user control is loaded.

The user defined control is being rendered and is visible, but its behaviour is strange...

If you dynamically add your contorls into an updatepanel, the issue comes.

There are few good articles written byScott Mitchell on dynamically loading Controls which you will find in the following links:

Dynamic Controls in ASP.NETWorking with Dynamically Created ControlsDynamic Web Controls, Postbacks, and View State