Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Alanna
875
How do you get the width of a tab?
posted

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.

Parents
No Data
Reply
  • 24497
    Verified Answer
    posted

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

Children