Telerik UI for Windows Phone by Progress

RadJumpList provides you with a control that can be used into scenarios, where the user is required to select an option. The items are arranged into groups, which you can define, filter and jump to by selecting a group from a group picker popup.

Using RadJumpList

In order to use the RadJumpList control in your application you have to reference the following assembly in your project:

  • Telerik.Windows.Controls.Data.dll

As RadJumpList inherits from RadDataBoundListBox you also need the following one:

  • Telerik.Windows.Controls.Primitives.dll
Note

To use some additional features of RadJumpList you may have to add references to other assemblies.

To use generic descriptors you have to reference the following assembly in your project:

  • Telerik.Windows.Data.dll

Learn more about generic descriptors in Features section.

To use DataGroup you have to reference the following assembly in your project:

  • Telerik.Windows.Core.dll

After adding references to the aforementioned dlls, you can declare a new RadJumpList as any normal Silverlight control.

Note

To use RadJumpList in XAML you have to add the following namespace declaration:

xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
CopyXAML
<telerikData:RadJumpList x:Name="radJumpList" Width="300" Height="300"
                         GroupPickerItemTap="radJumpList_GroupPickerItemTap"/>
CopyC#
RadJumpList radJumpList = new RadJumpList();

Adding content to RadJumpList

To add content to RadJumpList you have to use the ItemsSource property. After providing a source collection and a group descriptor, the items will be arranged in groups depending on what you have defined. Without a group descriptor RadJumpList looks visually like a standard list box.

Note

To learn more about the group descriptors read here.

CopyC#
List<string> days = this.GetDays();
this.radJumpList.ItemsSource = days;
CopyC#
private List<string> GetDays()
{
    List<string> days = new List<string>(12);
    foreach (string dayName in DateTimeFormatInfo.CurrentInfo.DayNames)
    {
        days.Add(dayName);
    }
    return days;
}

Adding content to Group Picker

When the items are arranged in groups you can jump to a group by picking it in the group picker popup. The popup is opened when a group header is clicked. It will display all the actual groups within RadJumpList. In this case the GroupPickerItemTap event is handled internally and the control is scrolled to the beginning of the associated group.

Note

To learn more about the group descriptors read here.

To learn more about the group picker read here.

If you choose to explicitly populate the group picker, you should use the GroupPickerItemsSource property.

Here is an example.

CopyC#
string alphabet = "#abcdefghijklmnopqrstuvwxyz";
List<string> groupPickerItems = new List<string>(32);
foreach (char c in alphabet)
{
    groupPickerItems.Add(new string(c, 1));
}
this.radJumpList.GroupPickerItemsSource = groupPickerItems;

You will then need to manually handle the event and implement your custom logic to jump to a group. The next section gives an example.

Jumping to a group

If you have explicitly set the GroupPickerItemsSource property, you have to provide a logic to jump to the corresponding group when an item is selected from the group picker. This is done by creating a handler for the GroupPickerItemTap event.

Here is an example implementation:

CopyC#
private void radJumpList_GroupPickerItemTap(object sender, GroupPickerItemTapEventArgs e)
{
    foreach (DataGroup group in this.radJumpList.Groups)
    {
        if (object.Equals(e.DataItem, group.Key))
        {
            e.DataItemToNavigate = group;
            return;
        }
    }
}

The Groups property contains all groups in our RadJumpList and the Key property is its header. We go through all groups and find the one we want to jump to.

Note
To create groups in RadJumpList you have to use a group descriptor. To learn how to use it read here.