Zooming Programmatically

Zooming - Programmatically

You can specify a zoom level programmatically by changing the $( selector).Gantt( 'option', 'BaseTimeUnitWidth' ) property as follows:

// For zooming out 50%

$( selector).FlexyGantt( 'option', 'BaseTimeUnitWidth',37.5 ) // Default is 25.0; Max is 50.

The above value changes as the end-user zooms in and out the header during runtime.

This is called "base time unit width", because it indicates the width (in pixels) for the current "base time scale type" header which is indicated by the BaseTimeScaleType property. The BaseTimeScaleType property does not usually change during the life of the gantt control, even when there are headers being added and removed or shown/hidden. It's value is usually RadiantQ.Gantt.TimeScaleType.Days unless you have a RadiantQ.Gantt.TimeScaleType.Hours header in the time scale. So, a value of 20 for BaseTimeUnitWidth usually means - draw the base time scale type time units (usually Days) 20 pixels wide. A time unit representing a week would be drawn 140 pixels wide and so on.

There are also (settable) BaseTimeUnitWidthMinimum and BaseTimeUnitWidthMaximum which dictate the allowed range of zooming operations. This specified range will be enforced while setting the zoom value programmatically or by the end-user.