WebDrillDown Studio
  Reset
Vertical Menu:
This sample demonstrates how the main buttons in WebDrillDown can be displayed in a vertical (top-to-bottom) fashion. This can be accomplished by making a change to the core Cascading Style Sheets (CSS) file.

The vertical appearance of the main buttons can be achieved by setting the following CSS property, which changes the buttons to be formatted as block elements:

.cwddButton
{
    display: block;
}

All other changes to the CSS properties are for cosmetic purposes only.

This sample also demonstrates how you can modify the dimensions of the popup menu. To support this feature, WebDrillDown uses the following client-side method:

function cwddOnShowPopup(controlId, popupSettings)

This is a callback method that can be implemented by you. WebDrillDown will automatically detect the presence of this method, and call it whenever a popup menu is shown. The parameters are:
  • controlId - the control identifier of the WebDrillDown instance.
  • popupSettings - the computed settings for the popup menu (left, top and minWidth).
The popup settings contains the dimensions used to display the popup menu, and can be adjusted to satisfy the requirements of your web applications.

In this sample the WebDrillDown is allowing you to select some food, organized by food group and item. 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:
/Orientations
    /VerticalMenu