Skip to main content Skip to footer

Sorting and Grouping C1FlexGrid through XAML

Considering the popularity of MVVM pattern with WPF and Silverlight, developers are always looking to implement every possible feature in XAML. In this small utility blog, I have provided implementation to show Sorting and Grouping on C1Flexgrid for WPF using XAML. Core concept behind this implementation defines a CollectionViewSource object in XAML instead of code behind.

Create Collection Object

public class CustomerViewModel  
   private ObservableCollection _customerList;  

   public CustomerViewModel()  
     _customerList = new ObservableCollection();  
     _customerList.Add(new Customer() { Name = "John", Age = 29, City = "NewYork" });  
     _customerList.Add(new Customer() { Name = "Ram", Age = 25, City = "New Delhi" });  
     _customerList.Add(new Customer() { Name = "Xiang", Age = 39, City = "Tokyo" });  
     _customerList.Add(new Customer() { Name = "Dave", Age = 27, City = "Washington D.C." });  
     _customerList.Add(new Customer() { Name = "Allen", Age = 32, City = "London" });  
     _customerList.Add(new Customer() { Name = "Mark", Age = 30, City = "Canberra" });  
     _customerList.Add(new Customer() { Name = "David", Age = 26, City = "Pittsburgh" });  
     _customerList.Add(new Customer() { Name = "Sheila", Age = 25, City = "New Delhi" });  

   public ObservableCollection CustomerList  
     get { return _customerList; }  

   private string _sortField;  
   public string SortField  
     get{ return _sortField;}  
     set {_sortField=value;}  

public class Customer  
   public string Name { get; set; }  
   public int Age { get; set; }  
   public string City { get; set; }  

Define CollectionViewSource in XAML

Once we define the CollectionViewSource object in XAML, we have to set the SortDescription and GroupDescription properties.


   <CollectionViewSource x:Key="SortedItems" Source="{Binding Path=CustomerList}">  
        <scm:SortDescription PropertyName="City" Direction="Descending"/>  
        <PropertyGroupDescription PropertyName="City"/>  

Binding C1FlexGrid to CollectionViewSource

You would have noticed in the above code snippet, that we provided a Key to CollectionViewSource object. This would help us to set this CollectionViewSource as StaticResource object for ItemSource proprety of C1FlexGrid.

<c1:C1FlexGrid Name="c1FlexGrid1" AutoGenerateColumns="False" ItemsSource="{Binding Source={StaticResource SortedItems}}">  
      <c1:Column Binding="{Binding Name}"/>  
      <c1:Column Binding="{Binding Age}"/>  
      <c1:Column Binding="{Binding City}"/>  

Once we have all the above code snippets in place, when we run the sample, it would have the output similar to the image below. FlexXamlSortingGrouping Refer to the attached sample for complete implementation. Download Sample


comments powered by Disqus