Tab Container within an Update Panel

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Tab Container within an Update Panel

Shortcuts

Previous Next

Tab Container within an Update Panel

Last post 11-25-2008 4:01 PM by odinn. 11 replies.

Sort Posts:

Tab Container within an Update Panel

01-31-2007, 1:05 PM

Contact

6 point Member
jamehol
Member since 01-31-2007, 5:58 PM
Posts 12

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

Filed under: Updatepanel Tab TabContainer

Re: Tab Container within an Update Panel

01-31-2007, 11:20 PM

Contact

17,453 point All-Star
albertpascual
Member since 05-23-2003, 2:11 PM
Riverside, CA
Posts 3,474

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.

Cheers
Al
My Blog
MapStats.NET
Please click on 'Mark as Answer' if this post answered your question!

Re: Tab Container within an Update Panel

06-29-2007, 9:50 AM

Contact

130 point Member
smimon
Member since 10-20-2006, 9:55 AM
Posts 52

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

06-29-2007, 10:05 AM

Contact

1,160 point Participant
ssayed@iotap.com
Member since 05-17-2007, 12:03 PM
Mumbai, India
Posts 223

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

P.S. - Mark the post as answer if it helps you.

Cheers
Sohail Sayed

Filed under: tab container and update panel

Re: Tab Container within an Update Panel

06-29-2007, 7:24 PM

Contact

4,346 point Contributor
sburke_msft
Member since 04-04-2006, 7:28 PM
Redmond, WA
Posts 770

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?

Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.

Re: Tab Container within an Update Panel

07-02-2007, 5:32 AM

Contact

130 point Member
smimon
Member since 10-20-2006, 9:55 AM
Posts 52

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

07-02-2007, 5:40 AM

Contact

130 point Member
smimon
Member since 10-20-2006, 9:55 AM
Posts 52

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

08-20-2007, 4:43 PM

Contact

6 point Member
lukerogers15
Member since 08-20-2007, 8:39 PM
Posts 3

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

Filed under: tab container

Re: Tab Container within an Update Panel

08-20-2007, 5:18 PM

Contact

2 point Member
smlong
Member since 08-20-2007, 9:17 PM
Posts 1

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

08-20-2007, 6:21 PM

Contact

2,794 point Contributor
ysw
Member since 06-15-2007, 4:32 PM
Ukraine
Posts 515

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