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 TabContainer event.

Hi,
I have a Ajax tabcontainer on my webpage. How can I handle the events when I changed the tabs. I have usedOnActiveTabChanged event in the tabcontainer but it is not working. Please can any one help me? I am providing my code here. Your response is highly appreciated.

<ajaxToolkit:TabContainerID="TabContainer1"runat="server"Width="100%"ActiveTabIndex="0"
ForeColor="green"OnActiveTabChanged="TabContainer1_ActiveTabChanged" >
<ajaxToolkit:TabPanelID="tabPanelSiteDetails"runat="server"HeaderText="Site Details"BorderStyle="Dotted">
<ContentTemplate>
<uc8:HeadingMessageID="HeadingMessage1"runat="server"/>
<uc1:Sites_SiteDetailsID="Sites_SiteDetails2"runat="server"/>
</ContentTemplate>
</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelID="tabPanelCOntacts"runat="server"HeaderText="Contacts"CssClass="AjaxTabItem_Site">
<ContentTemplate>
<ucall:Sites_ContactDetailsID="ContactsAll"runat="server"/>
<br/>
<uc2:ContactsID="Contacts"runat="server"/>
<br/>
<uc7:EditDelteCancelID="EditDelteCancel3"runat="server"/>
</ContentTemplate>
</ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

***********CODE BEHIND CODE**************

protectedvoid TabContainer1_ActiveTabChanged(object sender,EventArgs e)
{
FillData();
}

Thanks & Regards

Not sure it will help , but could you try to set AutoPostback = true for tab container?

I have the same problem.

Autopostback=> "is not a valid attribute" !

The callback arrives only after a request to the server.

A solution is perhaps to use theOnClientActiveTabChanged and then starting a request from Javascript.

Is there a better way?

Sincerely

Stephan Schipal

I used the same thing (OnClientActiveTabChanged event). It is working for me.

Is there any way to control the background color of the TabContainer???

Hi,

The name of this attribute is AutoPostBack. Please note the three capital letters in the word.

And as far as I know from my own eperience and from the experience of many other users, server-side eventing functions properly.

Kind regards,

sbogus.

Yes,

You can control the whole outlook of a tab panel (the tab container's entity). You can override the CssClass attribute of the TabContainer control. In your own CSS you can then define own style and themes for the container.

For example to control the body's outlook of a tab panel you should override the class

/* tab's body */
.ajax__tab_new .ajax__tab_body

If you need further assistance, just ask here again.

Kind regards,

sbogus.