Hey,
We want to have one UltraWebTab control with one or more rows of tabs. I found a thread (http://forums.infragistics.com/forums/p/5871/64132.aspx#64132) which says that there's no way for the tab to automatically jump to the next row if the tabs have extended past the width of the main tab control.
So this is fine and initially I thought it would be easy to just check the width of each tab and compare it against the total width available to determine if we need to jump to the next row or not, but as it turns out, it doesn't appear to be that simple because there is no width property of the Infragistics.WebUI.UltraWebTab.Tab object.
My question is, without being able to obtain the width of each individual tab, how to I know whether that tab has gone over the width set on its parent the UltraWebTab control?
I had been wanting to do something similar to the below, but obviously this won't work:
For Each tabItem In tabControl.Tabs currentWidth = currentWidth + tabItem.width If currentWidth > tabControl.Width Then tabItem.NextRow = True currentWidth = 0 End If Next
I'm assuming other people must have done this before, so how do you do it?
Thanks.
Hi Alan,
Actually TabItem has Width property as part of Style.Width. So, application may set specific value for the Width of each TabItem and use it for calculation. That value of width should be set in pixels and it should be not less than actual width of tab-label rendered by browser (including possible padding, border, font-size, etc).The problem with calculations of sizes of html elements on server is not in missing attributes like width, but in unknown sizes of html elements rendered by browser. It is not possible to predict what exact size will take a specific object (SPAN, TD, IMG, etc.).
However, if application uses know font and knows sizes of possible images in tabs or it knows that Style.Width attribute is TabItem is not less than offsetWidth of tab on client, then it may calculate number of rows on server dynamically. Below I wrote a sample for you, which uses both approaches (assumes that average width of character in tab label is 12px).You may experiment with changing value of Width of UltraWebTab from 200px to 300px, 400px, 800px, etc, and check how it works.
aspx:
<igtab:UltraWebTab ID="UltraWebTab1" runat="server" DisplayMode="MultiRow" Height="200px" Width="200px"> <Tabs> <igtab:Tab Text="Tab 1"></igtab:Tab> <igtab:Tab Text="Tab 2"></igtab:Tab> <igtab:Tab Text="Tab 3"></igtab:Tab> <igtab:Tab Text="Tab 4"> <Style Width="150px"></Style> </igtab:Tab> <igtab:Tab Text="Tab 5"></igtab:Tab> <igtab:Tab Text="Tab 6"></igtab:Tab> <igtab:Tab Text="Tab 7"> <Style Width="100px"></Style> </igtab:Tab> <igtab:Tab Text="Tab 8"></igtab:Tab> </Tabs></igtab:UltraWebTab>
aspx.cs:
protected void Page_Load(object sender, EventArgs e){ int tabWidth = (int)this.UltraWebTab1.Width.Value; int rowWidth = 0; int charWidth = 12; for(int i = 0; i < this.UltraWebTab1.Tabs.Count; i++) { Infragistics.WebUI.UltraWebTab.TabItem tab = this.UltraWebTab1.Tabs[i]; int width = (int)tab.Style.Width.Value; if(width == 0 && tab is Infragistics.WebUI.UltraWebTab.Tab) width = charWidth * ((Infragistics.WebUI.UltraWebTab.Tab)tab).Text.Length; rowWidth += width; if(rowWidth > tabWidth) { rowWidth = 0; tab.NextRow = true; } }}
Hey Viktor,
I've tried doing this the 2nd way you mentioned because the widths of the tabs are unknown as the tabs are added at runtime. I can see that the code is executed, the widths are calculated properly and that it should actually be putting in a 2nd row of tabs, however when the control actually renders on the page, it's still all on one row.
Here is my code:
Dim totalWidth As Double Dim currentTabWidth As Double Dim rowWidth As Double Dim currentTab As Infragistics.WebUI.UltraWebTab.TabItem Dim characterWidth As Integer = 12
totalWidth = tabControl.Width.Value
For index As Integer = 0 To tabControl.Tabs.Count currentTab = tabControl.Tabs(index)
If TypeOf (currentTab) Is Infragistics.WebUI.UltraWebTab.Tab Then currentTabWidth = currentTab.Style.Width.Value
If currentTabWidth = 0 Then currentTabWidth = characterWidth * currentTab.Text.Length End If
rowWidth = rowWidth + currentTabWidth
If rowWidth >= totalWidth Then rowWidth = 0 currentTab.NextRow = True End If End If Next
Is there any reason why even after setting currentTab.NextRow = True that it still won't be on another row?
The only guess I have, that
Oh, I pressed wrong button...
The only guess I have, that DisplayMode is not set to MultiRow. Please check properties of UltraWebTab
Yup... that's worked. Thanks!