Telerik blogs

RadJumpList for WP7: Part II - Dynamic Sort, Filter and Group

by Valio Stoychev
February 11, 2011 Mobile 0 Comments


Download the sample code of the example.

In my previous post I explained the basic usage of the RadJumpList control and how to display the data by using declarative sort and group descriptors. Now in part two you will see how to give your users the ability to modify the sorting, grouping and filtering on the fly. There is no out of the box UI for these data operations provided in this version of the control. We are still not sure what will be the preferred way of implementing this from a UX perspective and how to align it with the Metro guidelines. So for the moment we have implemented the needed public APIs and it will be super-easy for you to tie any UI to the exposed functionality. Actually the example below is just that - we have a predefined list of columns that you can sort, predefined filters and predefined columns on which you can group the data.

WP7 JumpList

Lets first start with the Sorting. Here is how the code for dynamic sorting looks like:

private void SortPicker_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            RadJumpList1.SortDescriptors.Clear();
  
            if (SortListPicker.SelectedIndex == -1) return;
  
            // create a new sort descriptor
            PropertySortDescriptor sortDescriptor = new PropertySortDescriptor();
  
            sortDescriptor.PropertyName = SortListPicker.SelectedItem as String;
            sortDescriptor.SortMode = ListSortMode.Descending;
  
            RadJumpList1.SortDescriptors.Add(sortDescriptor);
        }

 

As you can see there are 3 steps involved:

  1. Clear the previous sorting by calling
    RadJumpList1.SortDescriptors.Clear();
  2. Create the new SortDescriptor based on the user input,
  3. Add the sort descriptor to the SortDescriptors collection of the RadJumpList

Now lets see how the filtering works. For filtering we should use the GenericFilterDescriptor class and pass a Predicate that will be used for filtering the data. Here is how the sample code looks like: 

private void FilterPicker_SelectionChange(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            RadJumpList1.FilterDescriptors.Clear();
  
            if (FilterListPicker.SelectedIndex < 1) return;
              
            GenericFilterDescriptor<Movie> filterDescriptor = new GenericFilterDescriptor<Movie>(delegate(Movie a)
            {
                if (FilterListPicker.SelectedIndex == 1)
                {
                    return a.Year > 2009;
                }
                else
                {
                    return a.Rating > 4.5;
                }
            });
  
            RadJumpList1.FilterDescriptors.Add(filterDescriptor);
        }

 

The grouping syntax is very similar to the sorting syntax, the only difference is that we are populating the GroupDescriptors collection of RadJumpList. Here is the sample code - really straightforward:

private void GroupPicker_SelectionChange(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            RadJumpList1.GroupDescriptors.Clear();
              
            if (GroupListPicker.SelectedIndex < 1) return;
  
            PropertyGroupDescriptor groupDescriptor = new PropertyGroupDescriptor();
  
            groupDescriptor.PropertyName = GroupListPicker.SelectedItem as String;
  
            RadJumpList1.GroupDescriptors.Add(groupDescriptor);
        }

 

So there you have it - a super easy and straighforward way to enable the 3 most common operations that are used on any data. Please download the sample project and let us know if you have any feedback. We are especially interested in your thoughts and feedback on the UI and how you think we should implement it out of the box for our controls.

Download the sample code of the example.

Read on - part 3 of the series is now published - performance of the Jump List with large data.

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.