ASP.NET AJAX Control Toolkit

Re: Tab Container within an Update Panel

odinn — Tue, 25 Nov 2008 21:01:29 GMT

lukerogers15 It's very useful. Thanks !!!

Re: Tab Container within an Update Panel

lukerogers15 — Mon, 20 Aug 2007 22:43:15 GMT

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

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

Thanks for the help!

Luke

Re: Tab Container within an Update Panel

ysw — Mon, 20 Aug 2007 22:21:00 GMT

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

Re: Tab Container within an Update Panel

smlong — Mon, 20 Aug 2007 21:18:41 GMT

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.

Re: Tab Container within an Update Panel

lukerogers15 — Mon, 20 Aug 2007 20:43:27 GMT

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

Re: Tab Container within an Update Panel

smimon — Mon, 02 Jul 2007 09:40:17 GMT

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);
    }

Re: Tab Container within an Update Panel

smimon — Mon, 02 Jul 2007 09:32:40 GMT

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.

Re: Tab Container within an Update Panel

sburke_msft — Fri, 29 Jun 2007 23:24:14 GMT

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?

Re: Tab Container within an Update Panel

ssayed@iotap.com — Fri, 29 Jun 2007 14:05:56 GMT

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

Re: Tab Container within an Update Panel

smimon — Fri, 29 Jun 2007 13:50:17 GMT

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

Re: Tab Container within an Update Panel

albertpascual — Thu, 01 Feb 2007 04:20:00 GMT

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.

Tab Container within an Update Panel

jamehol — Wed, 31 Jan 2007 18:05:29 GMT

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