var explorerBar = $find('<%= WebExplorerBar1.ClientID %>');
The purpose of this topic is to explain the usage of basic client-side methods of WebExplorerBar™.
As all Ultimate UI for ASP.NET AJAX controls, WebExplorerBar creates a client-side object with the ClientID of the control. To obtain a reference, use the following code:
In Javascript:
var explorerBar = $find('<%= WebExplorerBar1.ClientID %>');
Once you get the control client-side object, you can use selectGroup to select and/or toggle a group or item. This method takes three arguments:
Index of the specified group.
Boolean value. States whether the item will be selected or deselected.
Optional boolean value. Specifies whether to expand or collapse the group.
In Javascript:
var explorerBar = $find('<%= WebExplorerBar1.ClientID %>');
explorerBar.selectGroup(0, true, true);
To get an instance of any particular group or item, you’ll need to get a reference of WebExplorerBar Groups and Items object collection first. This is done using the getExplorerBarItems method. After that, you’ll be able to get a group or item using the getItem method, which takes the index as argument.
In Javascript:
var explorerBar = $find('<%= WebExplorerBar1.ClientID %>');
var groupCollection = explorerBar.getExplorerBarItems();
var group = groupCollection.getItem(0);
Now you are able to select, deselect, expand, collapse or change the text of the group that you have referenced.
To select or deselect use the set_selected method, choosing True for select or False for deselect.
In Javascript:
group.set_selected(true);
To expand or collapse use the toggle method.
In Javascript:
group.toggle();
To change the text use the set_text method.
In Javascript:
group.set_text();
Once you have reference to a group, you can get an instance of any specific item that belongs to this group by using get_childItem. This takes the index of the item as argument. The following example shows how to instantiate the first item of the first group.
In Javascript:
var explorerBar = $find('<%= WebExplorerBar1.ClientID %>');
var groupCollection = explorerBar.getExplorerBarItems();
var firstGroup = groupCollection.getItem(0);
var firstItem = firstGroup.get_childItem(0);