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
Ashiki:
mrheinhardt: