This sample demonstrates how you can apply your own custom styles to the WebObjectTree children items.
To support this feature, WebObjectTree allows you to add a user-defined "hint" to the individual items.
For example, the following adds a "Red" hint to the second child:
WebObjectTree calls the following client-side method whenever applying Cascading Style Sheets (CSS) class names to an element:
function cwotOnApplyStyle(controlId, classNames, itemHint)
The parameters are:
- controlId - the control identifier of the WebObjectTree instance.
- classNames - the current array of CSS class names being applied to the element.
- itemHint - the user-defined style hint for this item, or null if not applicable or available.
This is a callback method that needs to be implemented by you if you want to change the set of CSS class names being applied.
The set of class names are supplied in an array and can be altered in place, since arrays are passed by reference.
The user-defined "hint" is your key to determine which custom class name(s) you want to choose.
It should be noted that this callback method is called whenever applying class names to any element within the control.
WebObjectTree will automatically detect the presence of the method, and call it whenever setting class names.
This method does not expect a return value.
This design keeps the item information compact, at the same time allowing complete access to CSS to customize their appearance.
This sample uses this ability to change the icon image and text color of three items to
Red,
Green and
Blue, respectively.
In this sample the WebObjectTree is allowing you to select an artist, organized by painters and musicians.
Clicking the "Submit" button will display the full path for your selection below:
Click the "Reset" link to clear your selection.