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:

var oMySplitter = $find('xMySplitter');

oMySplitter.add_splitterBarCss = function(i_sCss) {
   Sys.UI.DomElement.addCssClass(this._elements.d0, i_sCss)
}

Using Microsoft Ajax Library’s (which is already part of the page anyway) Sys.UI.DomElement.addCssClass method we apply CSS class to relevant element.

We can even add a removal function that would remove unneeded CSS class:

oMySplitter.remove_splitterBarCss = function (i_sCss) {
   Sys.UI.DomElement.removeCssClass(this._elements.d0, i_sCss)
}

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:

oMySplitter.add_splitterBarCss('hiddenElement');
oMySplitter.remove_splitterBarCss('FullColorSplitter');