ASP.NET, XML, SQL and Javascript tips and tricks

Hello there. Haven’t written in a while, been busy participating in Stack Overflow community, but this little bit I found interesting.

Infragistics has a cool versatile Web Splitter control in their ASP.NET suite, but recently I encountered a shortcoming – there’s no way to set a CSS class for splitter bar on client-side via JavaScript. On server-side you can do something like

xMySplitter.SplitterBar.CssClass = "hiddenElement";

On client-side – you can get the CSS class via

var sCss = $find('xMySplitter').get_splitterBarCss()

but there’s no counterpart set_splitterBarCss() method.

Digging a little deeper I found that on client-side WebSplitter object has _elements collection which consists of top-level DOM elements that constitue WebSplitter control. In particular _elements.d0 corresponds to splitter bar. Knowing this – the rest is easy. The code below attaches add_splitterBarCss method to WebSplitter object:

The advantage of the above functions – if multiple other classes are applied to the splitter bar (infragistics themes, etc.), the add_splitterBarCss/remove_splitterBarCss functions will not touch them and only affect class passed as function parameter. Examples of usage: