Edit this page

Configuring the TimeRuler

This topic describes how you can configure the TimeRuler of the GanttView control. There are two key properties you can use:

PixelLength property

With the PixelLength property you can specify how much time is displayed in the time ruler and scale the time per pixel ratio. PixelLength sets the TimeSpan that will be rendered as one pixel.

The default PixelLength is 30 min.

Here are some examples:

  • The default behavior:

XAML

<telerik:RadGanttView x:Name="ganttView" TasksSource="{Binding Tasks}">
</telerik:RadGanttView>

ganttview-timeruler 1

  • Setting PixelLength to 1h:

XAML

<telerik:RadGanttView x:Name="ganttView1" TasksSource="{Binding Tasks}" PixelLength="01:00:00">
</telerik:RadGanttView>

ganttview-timeruler 2

  • Setting PixelLength to 15min:

XAML

<telerik:RadGanttView x:Name="ganttView2" TasksSource="{Binding Tasks}" PixelLength="00:15:00">
</telerik:RadGanttView>

ganttview-timeruler 3

TimeRulerLines property

Using the TimeRulerLines property you could customize the count, the type and the intervals of the time ruler lines in RadGanttView. There are three types of lines: GroupTickLine, MajorTickLine and MinorTickLine, each having different styling and default properties.

Here is a simple example:

XAML

<telerik:RadGanttView x:Name="ganttView3" TasksSource="{Binding Tasks}" >
    <telerik:RadGanttView.TimeRulerLines>
        <telerik:GroupTickLine>
            <telerik:TickInterval Interval="OneWeek" />
        </telerik:GroupTickLine>
        <telerik:MajorTickLine>
            <telerik:TickInterval Interval="OneDay" />
        </telerik:MajorTickLine>
        <telerik:MinorTickLine>
            <telerik:TickInterval Interval="ThreeHours" />
        </telerik:MinorTickLine>
    </telerik:RadGanttView.TimeRulerLines>
</telerik:RadGanttView>

And the result is:

ganttview-timeruler 4

Each time ruler line has a collection of TickIntervals objects. The most important properties of the TickInterval object are:

  • Interval - it is of enum type and can be set to any of the following values:

    • OneSecond

    • FiveSeconds

    • TenSeconds

    • FifteenSeconds

    • ThirtySeconds

    • OneMinute

    • FiveMinutes

    • TenMinutes

    • TenMinutes

    • ThirtyMinutes

    • OneHour

    • TwoHours

    • ThreeHours

    • SixHours

    • TwelveHours

    • OneDay

    • OneWeek

    • OneMonth

    • OneYear

  • FormatString - you can set the format of the text for the tick interval.

  • MinLength – sets the min length needed for the tick to be shown.

Let’s have the example modified like this:

XAML

<telerik:RadGanttView x:Name="ganttView4" TasksSource="{Binding Tasks}" >
    <telerik:RadGanttView.TimeRulerLines>
        <telerik:GroupTickLine>
            <telerik:TickInterval Interval="OneMonth" FormatString="{}{0:MMMM, yyyy}" />
        </telerik:GroupTickLine>
        <telerik:MajorTickLine>
            <telerik:TickInterval Interval="OneDay" FormatString="Day {0:dd}" />
        </telerik:MajorTickLine>
    </telerik:RadGanttView.TimeRulerLines>
</telerik:RadGanttView>

And the time ruler will have only GroupTickLine and MajorTickLine with formatted text:

ganttview-timeruler 5

You can have more than one TickInterval for a time ruler line – the GanttView will select the most suitable according to each TickInterval’s Interval and MinLength properties as well as PixelLength property of the control.

Let’s modify the example like this:

XAML

<telerik:RadGanttView x:Name="ganttView5" TasksSource="{Binding Tasks}" PixelLength="00:20:00">
    <telerik:RadGanttView.TimeRulerLines>
        <telerik:GroupTickLine>
            <telerik:TickInterval Interval="OneMonth" FormatString="{}{0:MMMM, yyyy}" />
        </telerik:GroupTickLine>
        <telerik:MajorTickLine>
            <telerik:TickInterval Interval="OneDay" FormatString="Day {0:dd}" MinLength="45" />
            <telerik:TickInterval Interval="OneWeek"  />
        </telerik:MajorTickLine>
    </telerik:RadGanttView.TimeRulerLines>
</telerik:RadGanttView>

Note that we’ve set two TickIntervals for the MajorTickLine. So when PixelLength is set to 20min, the result will be the following:ganttview-timeruler 6If we change the PixelLength to 40min, the Week interval will be chosen:

XAML

<telerik:RadGanttView x:Name="ganttView6" TasksSource="{Binding Tasks}" PixelLength="00:40:00">
    <telerik:RadGanttView.TimeRulerLines>
        <telerik:GroupTickLine>
            <telerik:TickInterval Interval="OneMonth" FormatString="{}{0:MMMM, yyyy}" />
        </telerik:GroupTickLine>
        <telerik:MajorTickLine>
            <telerik:TickInterval Interval="OneDay" FormatString="Day {0:dd}" MinLength="45" />
            <telerik:TickInterval Interval="OneWeek"  />
        </telerik:MajorTickLine>
    </telerik:RadGanttView.TimeRulerLines>
</telerik:RadGanttView>

ganttview-timeruler 7

You can check the GanttView TimeRuler example at UI for Silverlight demos to see the time ruler properties in action.