Filtering with RadDataGrid for Windows 8

Telerik’s RadDataGrid for Windows 8 is a flagship product: a powerful, robust, flexible tool for displaying large amounts of data concisely that is open to meaningful customer interaction.   

The basics of working with RadDataGrid are very simple, and you can manage the display of columns quickly and easily, as shown in this blog post.    Now we’ll take a look at how you can filter data programmatically.  First we will look at how to hard code your filter into the XAML and then we’ll look at how to create the filter dynamically in C#.

Filtering Data Declaratively

Let’s say that you have a fixed set of data from your data source and you wish to filter out all but a limited set of records to display in the DataGrid.  You can do this using a CustomFilter.  In our case, we’ll assume that the data we are using is in a class named CustomData that looks like this:

public class CustomData
{
   public string City
   {
      get;
      set;
   }
   public string Country
   {
      get;
      set;
   }
}
 

We have a collection of data that names cities in various countries, and we would like to restrict our display only to those that begin with Ma (an arbitrary example, but you can imagine that we might restrict our contacts in an application such as Conference Buddy to those who wish to enter our raffle). All we need do is create a class that implements the IFilter interface, and thus that provides a PassesFilter method that returns a boolean.  We pass each item in to this method and test to see if it meets our conditions, returning true or false accordingly.

public class CustomFilter : IFilter
{
   public bool PassesFilter( object item )
   {
      if ( ( item as CustomData ).City.StartsWith( "Ma" ) )
      {
         return true;
      }
      else
      {
         return false;
      }
   }
}
 

In the view (e.g., MainPage.xaml) we add a DataGrid and then inside the DataGrid we add a section for FilterDescriptors.  Inside the FilterDescriptors we add an instance of FilterDescriptor inside of which we add our custom filter,

<grid:RadDataGrid Width="600"
               Height="460"
               x:Name="grid">
   <grid:RadDataGrid.FilterDescriptors>
      <grid:DelegateFilterDescriptor>
         <grid:DelegateFilterDescriptor.Filter>
            <local:CustomFilter />
         </grid:DelegateFilterDescriptor.Filter>
      </grid:DelegateFilterDescriptor>
   </grid:RadDataGrid.FilterDescriptors>
</grid:RadDataGrid>
 

The custom filter referred to is the IFilter implementation described above.  With this filter in place, the data set is filtered down to the matching records, as shown in the figure.

Filtering Data Programmatically

This works well, but it hard-wires the filter in place declaratively. We may want to add or remove the filter programmatically.  To do this, we can take out the XAML for the FilterDescriptors and use them to determine how to create C# code to add (and remove) the filter.

<!--
 <grid:RadDataGrid.FilterDescriptors>
   <grid:DelegateFilterDescriptor>
      <grid:DelegateFilterDescriptor.Filter>
         <local:CustomFilter />
      </grid:DelegateFilterDescriptor.Filter>
   </grid:DelegateFilterDescriptor>
</grid:RadDataGrid.FilterDescriptors>
-->
 

Let’s add two buttons to the XAML, one to add the filter and one to remove it,

<StackPanel Orientation="Horizontal">
   <Button Name="Filter"
           Content="Filter"
           Click="Filter_Click" />
   <Button Name="UnFilter"
           Content="UnFilter"
           Click="UnFilter_Click" />
</StackPanel>
 

The implementation for Filter_Click will be based on the XAML we commented out.

We begin by creating a member variable of type DelegateFilterDescriptor,

private DelegateFilterDescriptor newDescriptor;

We then obtain the FilterDescriptors collection from the grid, initialize newDescriptor and set newDescriptor’s filter to a new instance of the CustomFilter. We can then add newDescriptor to the descriptors collection,

private void Filter_Click( object sender, RoutedEventArgs e )
{
   var descriptors = grid.FilterDescriptors;
   newDescriptor = new DelegateFilterDescriptor();
   newDescriptor.Filter = new CustomFilter();
   descriptors.Add( newDescriptor );
}
 

Notice that you can deduce this code from the XAML almost directly by examining the containment structure.

We made newDescriptor a member variable so that we can refer to it in the UnFilter_Click event handler, where we remove it from the collection,

private void UnFilter_Click( object sender, RoutedEventArgs e )
{
   var descriptors = grid.FilterDescriptors;
   descriptors.Remove( newDescriptor  );
}
 

Now we can click the Filter button and see the filter applied, and click the UnFilter button and see all the records.

Summary

In this blog post you saw how to create a custom filter for RadDataGrid and to apply it either declaratively (in the XAML) or programmatically (in the C#).   Filtering, while easy to do,  adds real power to your grid, allowing the user to zero in on the critical data of interest.