WebDrillDown Studio
Select artist:
  Reset
Custom Styles:
This sample demonstrates how you can apply your own custom styles to the WebDrillDown elements.

To support this feature, WebDrillDown allows you to add a user-defined "hint" to the individual items. For example, the following adds a "Red" hint to the second child:
Item Hint

WebDrillDown calls the following client-side method whenever applying Cascading Style Sheets (CSS) class names to an element:

function cwddOnApplyStyle(controlId, classNames, buttonIndex, itemHint)

The parameters are:
  • controlId - the control identifier of the WebDrillDown instance.
  • classNames - the current array of CSS class names being applied to the element.
  • buttonIndex - the zero-based index of the parent button, or -1 if not applicable.
  • 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. WebDrillDown 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 background color of the three buttons to Light, Medium and Dark, and the text color of the last three items to Red, Green and Blue.

In this sample the WebDrillDown 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.
Control being used:
View the code:
The code is available in the samples directory under:
/Presentation
    /CustomStyles