Selecting tabs programmatically

Jun 11, 2012 at 7:18 AM

Great tool Bill, thanks for the hard work.

I've just implemented it in a project but I need to be able to programmatically select the tab on page load (determined by various querystring settings).

I've tried iterating through .Items and setting the desired item to .Selected = true however the results I get are strange, it looks rather like all tabs are selected rather than just the one I've specified.  Actually, background colors mismatch the bottom border style, so the tabs appear sort of half-selected.  Yellow but no bottom border.

Is there already built-in a way to do this properly?

Similarly I need an easy way to get the currently selected tab in order to choose what's displayed below the tabstrip - this would occur both on first entry to the page after the initial tab is selected, and then on postbacks when the tab has been changed.

What I'm actually looking for is get/set property where I can specify the appropriate Tag of the tab I want selected, or get the current tag. 

I tried implementing a proper selection method based on the private SetSelectedItem (id) method, however it's not working and I think I'm misunderstanding how you've designed tags and id's.  Is it something simple I can fix?

Thanks for having a look-

public void SetSelectedItemFromTag (string tag)
{
      foreach (TabItem tabItem in _tabItems)
      {
          if (tabItem.Tag.Equals (tag, StringComparison.CurrentCultureIgnoreCase))
          {
              SetSelectedItem (tabItem.Id);
              return;
          }
      }
}


Coordinator
Jun 13, 2012 at 12:26 PM

Looping through the Items and setting Selected = true on an Item to select should work. What browser/version are you using?

Jun 14, 2012 at 12:02 AM

Thanks Bill, I just re-implemented it and it's working great.  I'm not certain what made it work - it might have been something to do with my tag comparison, or viewstate, or possibly a CSS bug that was causing the display problems. 

In the current approach I pass in the tab I want selected as e.g. ?View=demographics

That enum translates to a number;

    public enum ReportArea
    {
        // integers are tab array position, for selection 
        activity = 0,
        demographics = 1,
        log = 2
    }

And I get/set the selected tab through a page class property;

        public ReportArea SelectedTab
        {
            get
            {
                for (int tab = 0; tab < tabStrip.Items.Count; tab++)
                {
                    if (tabStrip.Items[tab].Selected)
                        return (ReportArea) tab; 
                }    

                return ReportArea.activity; // default 
            }
            set
            {
                for (int tab = 0; tab < tabStrip.Items.Count; tab++)
                {
                    if (tab == (intvalue)
                        tabStrip.Items[tab].Selected = true;
                    else
                        tabStrip.Items[tab].Selected = false;
                }    
            }
        }

This now seems to be working flawlessly.

Thanks again!