When Completed

Your NetCharts Designer perspective will appear like this:
 

Getting Started

Start by closing any open editors. Go to NetCharts Designer’s File menu and select the Close All option.
 
Next, create a new project named MenuCascadeProject.

Create NDX files for Country, State and City

We will be using the Hypersonic Database ‘Examples’ for this project, and the table: WMS_LOCATION for the location information:
 
Create a Hypersonic (HSQL) named data set (NDX) and name it Country.ndx.
 

 
Add the following SQL statement to the SQL: input box:
 

SELECT DISTINCT COUNTRY AS “All”, COUNTRY AS “%” FROM WMS_LOCATION

Click OK, click Finish.
 

 
Create another HSQL NDX file named State.ndx, now, add the following SQL statement as the query string:
 

SELECT STATE AS “All”, STATE AS “%” FROM WMS_LOCATION WHERE COUNTRY like ‘varCountr’

Add a variable by clicking on the Add button in the Variables group, and add the following variable definition.
 

 
Click OK.
 

 
Finally, Create a HSQL NDX file named City.ndx using the SQL statement:
 

SELECT CITY AS “All”, CITY AS “%” FROM WMS_LOCATION WHERE COUNTRY like ‘varCountry’ AND STATE like ‘varState’

Add some variables by clicking on the Add button in the Variables group, and add the following variable definition.
 

 

 
Click OK.

Create a Page

Create a new page object, and name it page

Create the Menus

We now need to drag each individual Dropdown menu on to the page layout. This is accomplished using the HTML Form Element object from the pallet to the left of the page layout.
 
Drag an HTML Form Element on to the page layout, and a Dropdown menu will appear allowing the selection of HTML forms for the page. The top selection is Drop Down menu, so click OK.
 

 
After you drag the first menu onto the page, fill out the Menu tab with the following:
Page Variable: varCountry

Options NDX: Country.ndx

Use First Source Value: check

Update without page refresh: check

Pass Page Variables: check

Label: Please Select a Country

Location: Top
 

 
Click OK.
 
Now repeat as above steps for the remaining menus as follows:
 
Menu2 (State menu):

Drag a Dropdown Menu to the right of the Country menu

Set the Page Variable name to be varState

Select State.ndx as the Options NDX

Click on Use First Source Value,

Click on Update without Page Refresh,

Click on Pass Page Variables

Change the menu label to: Please Select a State:

Location set to Top

Click OK

Menu3 (City menu):

Drag a Dropdown Menu to the right of the State menu

Set the Page Variable name to be varCity

Select City.ndx as the Options NDX

Click on Use First Source Value,

Click on Update without Page Refresh,

Click on Pass Page Variables

Change the menu label to: Please Select a City:

Location set to Top

Click OK

Create the Table Data Source, and the Table

Create a new NDX data source with the name Location.ndx.
 
Set the SQL query to read:

SELECT * FROM WMS_LOCATION WHERE COUNTRY like ‘varCountry’ AND STATE like ‘varState’ AND CITY like ‘varCity’

and add the variables with the specified default values for each:
 

 

 
Now create a Table object, named Location.tbl, and set its Data Source binding to reference the NDX object Location.ndx after clicking Next. Open the Pagination tree‐control in NetCharts Designer, and for your table select the Enable pagination checkbox, and set the Number of rows per page to 5.
 

Place the Table

Edit page.pgl. Then drag the table Location.tbl from the file selection area, onto the page and place it below the 3 menu controls which were previously created on the page. Click OK to the resource menu.
 

Test the interface

As you select each menu you should see the following behavior:

• All menus to the right of the currently selected menu should update (you will briefly see a ‘Loading…’ popup during this time). Those menus will contain a filtered list based on the filter in the menu directly to the left.
• The table being driven by the menu controls should update with data reflecting the current set of filters, with a fade‐out/fade‐in visual effect.

Additional Styling

Edit the Location.tbl, and select the Overview tree node.
 
Edit the basictable style, and click the new button. Name the new style LocationTableStyle. Enable text style by checking Style Text. In the Table Border group, set all 4 border widths to 1, and set all 4 Styles to Solid. Click OK.
 
In the Row Properties group, create an Alternate Row Style named AlternateRowStyle. In the Background Fill group, select Solid from the dropdown menu, and select an orange color from the color chooser. Click OK.
 
In the Column Properties group, check the Use First Row As Column Header check box.
 
Click on the Column Definitions Tree node and add a new Column Definition. In the Column Header group, add a Style called ColumnHeaderStyle, where the font is a white 12 Point Bold Arial, set a background fill type as Solid and color it a lighter orange, using the Define Custom Colorbutton. Next, set a right and left border with of 1, a Style of Solid and make it the same orange as the alternate row style. Next click the Add button 5 times to add additional Column Definitions.
 
Return to the page editor to view the final look: