Edit this page

Getting Started

Using Telerik scroll bars is a bit more intricate compared to using the standard scroll bars because you have to handle scroll event manually. The rest of this article demonstrates how you can use two panels to implement scrolling for the content of the second panel.

1. Add a RadPanel to your form (TelerikMetro theme was used for both panels. This theme is contained in the Miscellaneous theme component):

track-and-status-controls-scroll-bar-getting-started 001

2. Add a RadVScrollbar in the panel and dock it to the Right:

track-and-status-controls-scroll-bar-getting-started 002

3. Add another RadPanel in the already added one and set its height to the total height you want to be available upon scrolling. This value can be statics e.g. 1000 pixels or dynamic determined by the scrollable content. For the purpose, of this example it is set to 1000 pixels. 

track-and-status-controls-scroll-bar-getting-started 003

4. The next step is to add controls to the second RadPanel (the controls which are to be scrolled):

Adding controls to the panel

for (int i = 1; i < 15; i++)
    RadButton button = new RadButton();
    button.Location = new Point(30, i * 30 + 5 * i);
    button.Size = new Size(70, 30);
    button.Text = "RadButton" + i.ToString();

For i As Integer = 1 To 14
    Dim button As New RadButton()
    button.Location = New Point(30, i * 30 + 5 * i)
    button.Size = New Size(70, 30)
    button.Text = "RadButton" & i.ToString()
Next i


You can add controls by drag and drop at design time as well.

track-and-status-controls-scroll-bar-getting-started 004

5. Then, subscribe to the Scroll event of the vertical scroll bar and assign its negated value to the Top property of the second RadPanel:

Handling the Scroll event

void radVScrollBar1_Scroll(object sender, ScrollEventArgs e)
    this.radPanel2.Top = -this.radVScrollBar1.Value;

Private Sub radVScrollBar1_Scroll(ByVal sender As Object, ByVal e As ScrollEventArgs)
    Me.RadPanel2.Top = -Me.RadVScrollBar1.Value
End Sub

6. The last required step is to set the Maximum property of the scroll bar to reflect the size of the scrollable height which is the total height of the scrollable content minus the visible height. For the example of this section in particular, that is the height of the second panel minus the height of the first panel.

Specify RadVScrollBar's maximum

this.radVScrollBar1.Maximum = this.radPanel2.Size.Height - this.radPanel1.Size.Height;

Me.RadVScrollBar1.Maximum = Me.RadPanel2.Size.Height - Me.RadPanel1.Size.Height

track-and-status-controls-scroll-bar-getting-started 005

See Also