• Home
  • About
  • Resume

Infragistics UltraWebTab: Accessing Tab Separator in client-side JavaScript

By , 10/14/2009 1:08 PM

I am using Infragistics UltraWebTab and needed to hide a tab and a tab separator located next to it using client-side JavaScript.  Hiding tab is pretty trivial. Assuming we gave it a key:

<igtab:Tab Key="MyTab" Text="My tab">

The code to hide the tab is:

var uwTabControl = igtab_getTabById('xuwMyTabControl');
var tab = uwTabControl.tabFromKey('MyTab');
tab.setVisible(false);

I tried to access separator in the same way but it didn’t work. You can assign it a key, but “fromKey” method works only server-side for separators. Using client-side Tabs array of UltraWebTab didn’t work either – it contains only actual tabs, not separators. But turned out you can access the separator using a little DOM and HTML

Tabs are rendered as standard HTML <TD> tags on a page. That includes both normal tabs and separators. So to access the separator all that is needed is to get <TD> element representing actual tab and using it as a reference access the next <TD> element. And here is the magic line:

tab.getElement().nextSibling.style.display='none';

getElement() method returns underling HTML element of the tab – <TD> tag. nextSibling DOM method – returns next element on the same level within DOM hierarchy – in this case next TD within the TR which represents separator tab. After you get reference to element you’re free to do whatever you need with it – in my case I am hiding it by setting it’s display property to ‘none’.

Leave a Reply

Panorama Theme by Themocracy