Tab container

hi all,

i have placed the tab container in side a datagrid. tab container will appear in the item command of datagrid. if i set the active tab index as zero. i got some error.

57 line 17 char

argument out of range exception

1495 line 38 char

this.get_element().style is null or not an object.

if i remove that active tab index property tab container works fine.

how to close the tab container?

please help me

Balaji

Hi Balaji,

Can you show me your relevant code so that I can reproduce your issue?
A stripped simpler version of your code would be better.

Looking forward to your reply.

hi,

here is my code snippet

protectedvoid dlHostels_ItemCommand(object source,DataGridCommandEventArgs e)

{

tabcontainer tbc=new tabcontainer();

tbc = (TabContainer)dlHostels.Items[e.Item.ItemIndex].FindControl("TabContainer1");

Label lblInfo =newLabel();

TabPanel tp = new tabpanel();

tp.controls.add(lblinfo);

tbc.controls.add(tp);

//i have added three panels to this tabcontainer.

tbc.activetab=0; // problem with this tabindex. if i didnt mention anything then it works fine.

}

Tab Container within an Update Panel

I am working on a page that contains a grid within an update panel. The user selects an item from the grid, popping up a draggable panel with the details of the item they selected.

I want to be able to have a tab control within the pop up, but am running into some issues. The backgrounds of the tab headers dont show up. It looks to me like the styles arent getting sent to the browser because the control is being added to the page through the update panel. When I move the tab control outside of the update panel, or add another one to the page that is visible on page load it looks fine.

I was about to add another tab container to the page and set the display to none but that seems like a hack. I was wondering if there is any other way to get the styles for the tab container down to the page on load without having to do something like that.

Thanks for the help in advance,
James Hollister
Ascending Integration Inc.
www.AscendingIntegration.com

The tab control should be outside that UpdatePanel or inside a new UpdatePanel to work. Makes sense?

If you, please post the code and let's figure it out.

I'm having the same issue with the TabContainer styles not being sent to the browser, did anyone find a solution for this?

The tab container itself contains ajax functionality

Most Controls that contain built in ajax functionality dont work well in an UpdatePanel because the javascript does not gets send in an update panel during partial updates

You will need to keep the tab container outside of an update panel.

This however causes the problem of the tab container state not being updated from the code behind. For example i was not able to change the active tab from code behind in a partial postback.

The turnaround for this was that i used javascript

the below code shows how exactly

first io create a javascript function to change the active tab index

function ChangeTab(indx)

{

$find('<%=TabContainer1.ClientID%>').set_activeTabIndex(indx)

}

$find('<%=TabContainer1.ClientID%>') gets a reference to the tab container object in the javascript

then called this from code behind using the following

ScriptManager.RegisterStartupScript(Me, updButtonBar.GetType,"KEY","ChangeTab(2);",True)

here the me is the page and updbuttonbar is the update panel . It can be any update panel in the page.

In this way you can manipulate the tab container by calling any of the methods of the tab container javascript object.

If you want to find the listing of the methods save As the page containing the tab container as a complete web page on ur local hard drive

in one of the resources file u can find the methods the javascript object tab container contains or perhaps download the ajax control toolkit source

This ways was good enough for me.

Let me know if it helps

Cheers

Sohail Sayed

No this is not true - UpdatePanel does incremental loading of the scripts.

I'm not able to repro this. On the sample page, I wrap the TabContainer in an UpdatePanel and it works fine.

Can someone please post a repro?

I would do, but the situation in which this problem has arisen for me is a little bit complicated, since i'm building a custom webpart based draggy droppy affair. The TabContainer is in an UpdatePanel, which is in another UpdatePanel, and i'm creating it programatically.

I'll have a quick play, and see if i can get it to happen in a simpler scenario.

Ok, this is a much simplified reproduction of my page, but it causes the "bug". I need to add a TabContainer dynamically as the result of a button press, and in the following conditions, it appears with no styles on it.

<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> </div><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"><ContentTemplate><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></ContentTemplate></asp:UpdatePanel></ContentTemplate></asp:UpdatePanel> </form></body></html>

 
protected void Page_Load(object sender, EventArgs e) { }protected void Button1_Click(object sender, EventArgs e) { AjaxControlToolkit.TabContainer tbc =new AjaxControlToolkit.TabContainer(); AjaxControlToolkit.TabPanel tbp1 =new AjaxControlToolkit.TabPanel(); tbp1.HeaderText ="Test Panel 1"; Literal ltrl1 =new Literal(); ltrl1.Text ="Panel 1 Content"; tbp1.Controls.Add(ltrl1); tbc.Tabs.Add(tbp1); AjaxControlToolkit.TabPanel tbp2 =new AjaxControlToolkit.TabPanel(); tbp2.HeaderText ="Test Panel 2"; Literal ltrl2 =new Literal(); ltrl2.Text ="Panel 2 Content"; tbp2.Controls.Add(ltrl2); tbc.Tabs.Add(tbp2); UpdatePanel2.ContentTemplateContainer.Controls.Add(tbc); }
  

The problem that I am having along these lines is that when either the TabContainer itself or whatever container it is in (ex. Panel) is set to Visible=false; then on the partial page load the styling is not loaded. From my understanding it adds a <link> to the header when the page is loaded but this doesn't work if the control was not visible when the page was initially rendered. When the TabContainer is rendered everything is there and it works but you can't see the tab but only the HeaderText. All of the styling is lost.

Any idea of how to get around this? My thought was to add the <link> when the page is first loaded but I'm can't find anything about how to do this.

Luke

I'm having the same problem.

If I create a TabContainer dynamically (through OnInit) or initially set the TabContainer.Visible = false, the styling does not load.

Hi,

Unfortunatelly TabContainer does not properly load CSS if it first appears on the page in UpdatePanel with async update postback. However, it is quite easy to solve this, by adding an empty TabContainer somewhere to the page, but utside any UpdatePanel. Empty TabContainer without any Tabs does not render anything noticable to the page, but it loads CSS which is later used by other TabContainers.

So, add a TabContainer without pages to your page and make sure it is not in UpdatePanel and it its Visible = true.

-yuriy
http://couldbedone.blogspot.com

That did the trick. I added the following code and it works just like I want it to.

</asp:UpdatePanel>
<ajaxToolkit:TabContainerID="tabNotUsed"runat="server"Visible="true"/>

Thanks for the help!

Luke

TabContainer and UpdatePanel

Hi everyone,

I have a problem with TabContainer and UpdatePanel. I have an asp:DropDownList item within a TabContainer and I have an UpdatePanel outside of the TabContainer with a GridView in it.

What I would like to do is to update the GridView when the dropdownlist's selectedindexchanged is fired. But I got the following error saying that the dropdownlist control cannot be found which is not true. Dropdown is within TabContainer. Does anyone have any ideas why this is happening, why UpdatePanel cannot recognize dropdownlist within TabContainer?

A control with ID 'ddl' could not be found for the trigger in UpdatePanel 'UpdatePanel1'

<cc1:TabContainer ID="TabContainer1" runat="server">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText = "Meta Data">
<ContentTemplate>
<table>
<tr>
<td>
<asp:DropDownList ID="ddl" runat="server" OnSelectedIndexChanged = "ddlBundles_SelectedIndexChanged" AutoPostBack = "true" >
</asp:DropDownList>
</td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>

</cc1:TabContainer><br />

.............

..............

<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="gv" runat="server" BackColor="White" BorderColor="#999999"
.........

</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "ddl" EventName = "SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>

Check thisdocumentation on UpdatePanels. Triggers in NamingContainers are not supported. You could workaround it by firing an event on the tab container in your ddl event handler. In the UpdatePanel set the tabpanel as the control trigger and set the eventname to be that specific event.

Thanks for the tip. As you mentioned, since TabContainer is a Naming Container, controls within Naming containers can be accessed using '$' sign. And here is the solution for my problem.

<Triggers>
<asp:AsyncPostBackTriggerControlID = "TabContainer1$TabPanel1$ddl" EventName = "SelectedIndexChanged" />
</Triggers>

Besides, there is another solution which I could call Update method of UpdatePanel within the SelectedIndexChanged event of the DropDownList as below.

protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
{

...........

...........
UpdatePanel1.Update();
}

Hi,

here is a useful solution:

1Protected Sub Page_Init(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.Init2Dim apbtAs AsyncPostBackTrigger3For Each apbtIn UpdatePanel1.Triggers4If (LinkButton1.UniqueID.EndsWith(apbt.ControlID))Then5 apbt.ControlID = LinkButton1.UniqueID6End If7 If (LinkButton2.UniqueID.EndsWith(apbt.ControlID))Then8 apbt.ControlID = LinkButton2.UniqueID9End If10 If (LinkButton3.UniqueID.EndsWith(apbt.ControlID))Then11 apbt.ControlID = LinkButton3.UniqueID12End If13 If (DataList1.UniqueID.EndsWith(apbt.ControlID))Then14 apbt.ControlID = DataList1.UniqueID15End If16 Next17 End Sub

Greetings!

Yep, that did it for me! You are a genius. Thanks!