Skip to main content Skip to footer

Outlook-style Grouping

C1FlexGrid for WPF/Silverlight control now supports the creation of groups by dragging column headers into a grouping area, which is created by a separate component. What’s neat and ultra flexible about FlexGrid’s grouping panel is that you can customize the grouping behavior by using a simple value converter. FlexGroupPanel C1FlexGridGroupPanel control gives the flexibility to implement grouping similar to Microsoft Outlook where dates are grouped into groups like “Older than one year” or “2 days ago”. Before we move ahead, lets have a quick look at the final appearance of the grouping with C1FlexGridGroupPanel. C1flexgroupPanelgroupnig Lets start with the implementation......

Defining XAML Appearance


<c1:C1FlexGridGroupPanel  
   x:Name="_groupPanelCustomGrouping" Grid.Row="0" Background="WhiteSmoke"  
   WatermarkText="Drag column headers here to create groups."  
   MaxGroups="8"  
   HideGroupedColumns="False"  
   DragMarkerColor="#FF5C54"  
   FlexGrid="{Binding ElementName=_flexCustomGrouping}"/>  
<c1:C1FlexGrid x:Name="_flexCustomGrouping" Grid.Row="1" />  

Defining Converter for Outlook-style Grouping

Important section of this implementation involves defining the Converter class. This group converter specify the maximum number of groups allowed and show dates in ranges (this week, this month, this year, etc). Converter defines a list of Group Names for which a specific Item will be grouped. So we can have an item appear under multiple Groups.


public class DateTimeGroupConverter : IValueConverter  
{  

  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)  
  {  

    var list = new List();  

    var date = (DateTime)value;  

    var today = DateTime.Today;  

    if (today.Subtract(date).TotalDays <= 7)  
      list.Add("This week");  

    else if (date.Year == today.Year && date.Month == today.Month)  
      list.Add("This Month");  

    else if (date.Year == today.Year && date.Month == today.Month - 1)  
      list.Add("Last Month");  

    else if (date.Year == today.Year)  
      list.Add("This year");  

    else if (date.Year == today.Year - 1)  
      list.Add("Last year");  
    else  
      list.Add("Before last year");  
    return list;  

  }  

  public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)  
  {  
     throw new NotImplementedException();  
   }  
 }  

Group Converter

Once the converter is defined, we simply need to apply the same to the PropertyGroupDescription object.


 \_groupPanelCustomGrouping.PropertyGroupCreated += \_groupPanelCustomGrouping_PropertyGroupCreated;  

void \_groupPanelCustomGrouping\_PropertyGroupCreated(object sender, C1.WPF.FlexGrid.PropertyGroupCreatedEventArgs e)  
{  
   var pgd = e.PropertyGroupDescription;  
   if (pgd.PropertyName == "Introduced")  
     pgd.Converter = new DateTimeGroupConverter();  
}  

Refer to the attached sample for complete implementation. Download Sample

MESCIUS inc.

comments powered by Disqus