Navigation Toolbar

Overview

Navigation toolbar is a very useful tool that allows you to operate you chart's visual appearance without changing its inner settings. In fact Navigation toolbar is some slice of space where your navigation buttons are placed. There are 4 navigation buttons in AnyGantt: Zoom In, Zoom Out, Fit Button And Collapse-Expand Button. There destination will be explained further. Also you may adjust the position of your Navigation toolbar and its text settings. So, a typical XML for Navigation toolbar looks like this:

<navigation enabled="True" width="50" position="Top">
  
<buttons size="20" align="near" zoom_in_button="True" zoom_out_button="False" fit_button="True" collapse_expand_button="False" icon_color="yellow" button_padding="15">
    
<background />
  
</buttons>
  
<background />
  
<text align="Far">Navigation panel</text>
  
<font />
</navigation>

Note: in this section we won't touch upon such elements of visual appearance as background and font. If you want to know more read Visual Appearance Tutorial.

Basic Navigation Settings

Basic navigation settings include three attributes placed inside root navigation node. They are enabled, width and position. enabled is a boolean attribute and defines whether your navigation bar is enabled or not. By default it is "True". width determines the size of your navigation toolbar. position determines the position of your toolbar relatively to your chart. It may have 4 values: "Top", "Bottom", "Left" and "Right". By default navigation panel is located in the right side. Let's move it down and make larger. So we add the next strings to XML code and watch the result:

<settings>
  
<navigation enabled="True" width="100" position="Bottom" />
</settings>

Navigation sample 1 - Click to see Live Chart Preview
Navigation sample 1 - Click to see Live Chart Preview

Navigation Buttons

As it was already said above, there are 4 navigation buttons in AnyGantt: Zoom In, Zoom Out, Fit Button And Collapse-Expand Button. Zoom In/Zoom Out are responsible for zooming in and out the view of your chart on the plot/schedule. Fit button adjust the scale of the task bars/periods so that the fit the whole plot/schedule. And Collapse-Expand Button is used for fully collapsing and expanding all child tasks (resources) on the datagrid, leaving only parent tasks (resources) visible (to know more about parent and child tasks watch Task Hierarchy Tutorial).

By default all buttons have an "True" value, i.e. enabled. To disable them you just have to set "false" value. The four attributes responsible for buttons are in buttons subnode of navigation node and are: zoom_in_button, zoom_out_button, fit_button, collapse_expand_button. Their accordance with described above is evident. buttons node also has other attributes. size directly affects the buttons' size. align has three values: "near", "center" or "far". This adjusts in what part of the navigation panel the buttons are located. button_padding is the distance between buttons.

icon_color affects the color of buttons. background subnode of buttons node - the buttons' background. This attribute and node adjusts buttons' visual appearance.

Let's demonstrate the usage of buttons. For example we create a Gantt Chart with only "Zoom In" and "Fit" buttons. So we must disable "Zoom Out" and "Collapse-Expande" buttons. Lets's place both buttons in the center: align="center", color them in red - icon_color="red" and finally move them at the opposite sides of the navigation bar: button_padding="270". XML for navigation is the following:

<navigation>
  
<buttons zoom_out_button="false" collapse_expand_button="false" align="center" button_padding="270" icon_color="red" />
</navigation>

And that's the result. He have navigation toolbar at its default position (on the right side) with only two buttons left: "Zoom In" and "Fit".

Navigation sample 2 - Click to see Live Chart Preview
Navigation sample 2 - Click to see Live Chart Preview

Text align settings

Node text adjusts what should be written on the navigation toolbar. The text must be between an opening and closing "text" nodes. text node also has align attribute. It defines at what place of it should the label be located. Let's locate our text in the middle of the navigation panel:

<navigation position="bottom">
  
<text align="center">Navigation panel</text>
</navigation>

Navigation sample 3 - Click to see Live Chart Preview
Navigation sample 3 - Click to see Live Chart Preview

to top