Download the source code of the example

Last week we released our first beta of the Telerik Windows Phone 7 control toolkit. One of the new controls there is RadJumpList. It is a fundamental control for building data driven WP7 applications. We invested a lot into our data engine story - we have our own internal CollectionViewSource implementation which allows you to sort, filter and group your data with a single line of code (more on the data engine in this in-depth blog post).

Apart from the data engine we also built a high performance ListBox control. RadDataBoundListBox is a virtualized ListBox control which has two major features:

  • can display thousands of records (even millions if you got them on the device :)),
  • scrolls very smoothly

Now back to RadJumpList. It inherits from RadDataBoundListBox and is adding the group/sort and filter support which is coming from the data engine. Here is how the class diagram looks like:

RadJumpList for WindowsPhone Class Diagram

The important properties here are the Sort/Filter/GroupDescriptors - by using them you are able to control how the data is visualized. In the most common and simple scenario you need to write the following code:

<telerikDataControls:RadJumpList ItemTemplate="{StaticResource JumpListItemTemplate}" ItemsSource="{Binding}">
      
    <!-- Group by Genre -->
    <telerikDataControls:RadJumpList.GroupDescriptors>
        <telerikData:PropertyGroupDescriptor PropertyName="Genre"/>
    </telerikDataControls:RadJumpList.GroupDescriptors>
      
    <!-- Sort by Title -->
    <telerikDataControls:RadJumpList.SortDescriptors>
        <telerikData:PropertySortDescriptor PropertyName="Title"/>
    </telerikDataControls:RadJumpList.SortDescriptors>
      
</telerikDataControls:RadJumpList>

 

The code above will display the following Grouped and Sorted list of items:

 WP7 Jump List Group and Sort

 

Thats it - now you have your grouped and sorted list of items - with just a couple of lines of code. In the next part of the article I will explain how to dynamical change the sort/filter and group. Download the source code of the example and let us know if you have any feedback on that. 

Part 2 of the series is now available - read it here.


About the Author

Valio Stoychev

Valentin Stoychev (@ValioStoychev) for long has been part of Telerik and worked on almost every UI suite that came out of Telerik. Valio now works as a Product Manager and strives to make every customer a successful customer.

 

Comments

Comments are disabled in preview mode.