Grid Component Tree-Control Navigator Feature Pack

To purchase this Feature Pack, please click here.

 

The Tree-control Navigator displays a tree-control on the page. When the user makes a selection in the tree-control you can optionally filter the associated Grid component. In other words, the tree-control is used to navigate in the Grid. Hence the name 'tree-control navigator'.

The image below shows a Grid with a tree-control navigator.

 

The following videos demonstrate the Tree-control navigator in more detail.

 

Watch Video - Part 1

Watch Video - Part 2

 

To define a tree-control navigator, you check the smart field button for the 'Tree-control navigator definition'. This property will only be shown if you have the optional Feature Pack installed.

 

 

 

This causes the builder to display:

 

 

The builder allows you to:

 

Note: Using a Master Template is optional. If you don't use a Master Template, you control the placement of the grid parts in the .a5w page that hosts the Grid component. However, if you turn on the tree-control navigator, then you don't have a choice - you have to use a Master Template.

 

When you click the button to 'Define the Tree-control Navigator', the following dialog appears:

 

 

The tree-control can be populated by executing queries against a .dbf table or a SQL table. You can either choose 'Simple Query' or 'Complex Query'.

Simple Query

For this option you choose a single table as the data source for all levels of your tree. For example, if you want your tree to show a list of states, then within a given state, a list of cities, and within a given city, a list of lastnames, you would specify a single table against which all of the queries would be performed.

Complex Query

For this option you can specify a completely custom query for each level of the tree. For example if the top level of the tree is a list of countries, you might do a query against a SQL Server table to get a list of countries. If the next level of the tree is a list of states in a given country, you could specify a query against a MySQL table that lists states. Then for the next level, you might have a list of cities in the give country and state. The data for this level might come from a .dbf table.

Defining the Grid Filters

Once you have defined your tree-control hierarchy, you must then define the filters that will be applied at each level of the tree. It is optional whether there is a filter at any given level of the tree. For example, say that you have defined a tree-control with this hierarchy:

When the user clicks on a state name, you can filter the grid on the selected state, or you can choose not to filter the grid until the user clicks on a city name of a lastname.

If you do want to apply a filter when the user clicks on a state name, you could then check the 'Filter Grid when user selects an entry in the tree at this level' checkbox and then click the 'Define Filter' button to define the Grid filter.

 

Settings Tab

The Settings Tab allows you to control other aspects of the tree-control's appearance. You can define the height and width of the div that contains the tree-control. You can also control whether the tree-control has a 'Show all' hyperlink that removes any filter that was applied to the Grid when a selection was made in the tree-control.

Note: The 'Show All' button will only remove 'User Filters'. When you set up the Grid filtering, you can control whether the filters are applied as User Filters, Base Filters or Links.

 

 

 

Editing the Master Template

To edit the Master Template, click the 'Edit Master Template' button.  The editor opens up and you can define an HTML template with place-holders for all of the Grid parts. If your Grid does not have a Search part or a Detail View part then you do not need to insert the placeholders for those parts.

If you want two parts to appear side by side then you will need to use a table. Because displaying the tree-control navigator to the left of the Grid part is so common, a pre-built template is defined for this layout style. Click the 'Insert Table for Tree Navigator and Grid Part Placeholders' and it will insert a <table> control with two columns - one for the tree-control navigator, and one for the Grid part.