Intersoft ClientUI Documentation
Grouping Data with UXGridView
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Data Controls Overview > UXGridView > Grouping Data with UXGridView

This topic provides an overview of the data grouping feature in UXGridView, discusses the supported grouping capabilities such as value aggregates, and explains how to implement custom group value. For information about UXGridView and its features in general, see UXGridView Overview.

Enable Data Grouping

To enable data grouping in UXGridView, you set the CanUserGroupColumns property of UXGridView to true. Alternatively, you can set the CanUserGroup property of UXGridViewColumn to enable the grouping feature only in certain columns.

XAML
Copy Code 
<Intersoft:UXGridView CanUserGroupColumns="False">        
    <Intersoft:UXGridView.Columns>        
        <Intersoft:UXGridViewTextColumn Header="Customer ID" Binding="{Binding CustomerID}"/>
        <Intersoft:UXGridViewTextColumn Header="Contact Name" Binding="{Binding ContactName}"/>
        <Intersoft:UXGridViewTextColumn Header="Contact Title" Binding="{Binding ContactTitle}" CanUserGroup="True"/>
        <Intersoft:UXGridViewTextColumn Header="CompanyName" Binding="{Binding CompanyName}"/>
    </Intersoft:UXGridView.Columns>
</Intersoft:UXGridView>

Perform Data Grouping

There are a number of ways to group data in UXGridView. First, you can use the context menu on columns of which CanUserGroup property is set to true.

Alternatively, you can also drag the header of a column to the group box. The group box's visibility can also be toggled from the column's context menu. It can be displayed initially by setting the GroupByBoxVisibility to Visible.

Predefined group

To set a predefined group, you can specify the GroupDescriptors property in either XAML or code. You can also specify the default sort direction through the SortDirection property.

XAML
Copy Code 
<Intersoft:UXGridView AutoGenerateColumns="False" ItemsSource="{Binding Products}">
        <Intersoft:UXGridView.GroupDescriptors>
            <Intersoft:UXGridViewGroupDescriptor PropertyName="CategoryID" SortDirection="Descending"/>
        </Intersoft:UXGridView.GroupDescriptors>                           
</Intersoft:UXGridView>

Group Aggregates

UXGridView supports data aggregate in both the column and group level. To display aggregate values of a UXGridViewBoundColumn at group level, you set the GroupFootersVisibility property to Visible and specify the Aggregate property to one of the predefined value. You can also specify the string format to apply to the aggregate value by setting the GroupFooterFormatString property. If not specified, the aggregate value will be formatted using the value specified in the FooterFormatString property.

XAML
Copy Code 
<Intersoft:UXGridView GroupFooterVisibility="Visible" GroupByBoxVisibility="Visible" CanUserGroupColumns="True" ItemsSource="{Binding Products}" >
    <Intersoft:UXGridView.Columns>
        <Intersoft:UXGridViewTextColumn Header="Category ID" Binding="{Binding CategoryID}"/>
        <Intersoft:UXGridViewTextColumn Header="Product ID" Binding="{Binding ProductID}" Aggregate="Count" FooterFormatString="Count = {0}"/>
        <Intersoft:UXGridViewTextColumn Header="Product Name" Binding="{Binding ProductName}"/>
        <Intersoft:UXGridViewTextColumn Header="Units In Stock" Binding="{Binding UnitsInStock}" Aggregate="Max" FooterFormatString="Max = {0}"/>
        <Intersoft:UXGridViewTextColumn Header="Unit Price" Binding="{Binding UnitPrice}" Aggregate="Avg" FooterFormatString="Avg = {0:n2}"/>
        <Intersoft:UXGridViewTextColumn Header="Units On Order" Binding="{Binding UnitsOnOrder}" Aggregate="Min" FooterFormatString="Min = {0}"/>
        <Intersoft:UXGridViewTextColumn Header="Quantity Per Unit" Binding="{Binding QuantityPerUnit}"/>
    </Intersoft:UXGridView.Columns>
</Intersoft:UXGridView>

You can also set multiple values on the Aggregate property such as shown in the following example.

XAML
Copy Code 
<Intersoft:UXGridViewTextColumn Header="Unit Price" Binding="{Binding UnitPrice}" Aggregate="Avg,Max,Min" FooterFormatString="Avg = {0} | Max = {0} | Min = {0}"/>

Custom Group Values

When a data is grouped based on specific column, it will use the actual value of that particular column as the group values. For example, if you group the data based on CategoryID, the group value will be the CategoryID itself such as illustrated in the following figure.

You can change the group value to a more meaningful value through the use of GroupConverter, shown in the following examples.

CS
Copy Code 
public class CategoryConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        CategoriesRepository repository = CategoriesRepository.Instance as CategoriesRepository;
        if (repository != null && value != null)
        {
            int categoryID = (int)value;
            Category category = repository.Manager.Categories.ToList().Where(c => c.CategoryID == categoryID).FirstOrDefault();
            if (category != null)
                return category.CategoryName;            
        }

        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
XAML
Copy Code 
<Grid x:Name="LayoutRoot">
    <Grid.Resources>
        <Converters:CategoryConverter x:Key="CategoryConverter"/>
    </Grid.Resources>
    <Grid.DataContext>
        <ViewModels:ServerSideOperationViewModel/>
    </Grid.DataContext>

    <Intersoft:UXGridView AutoGenerateColumns="False"
                            ItemsSource="{Binding Products}" 
                            GroupFootersVisibility="Visible" GroupByBoxVisibility="Visible">

        <Intersoft:UXGridView.GroupDescriptors>
            <Intersoft:UXGridViewGroupDescriptor PropertyName="CategoryID"/>
        </Intersoft:UXGridView.GroupDescriptors>

        <Intersoft:UXGridView.Columns>
            <Intersoft:UXGridViewTextColumn Header="Category ID" Binding="{Binding CategoryID}" GroupConverter="{StaticResource CategoryConverter}"/>
            <Intersoft:UXGridViewTextColumn Header="Product ID" Binding="{Binding ProductID}" Aggregate="Count" FooterFormatString="Count = {0}"/>
            <Intersoft:UXGridViewTextColumn Header="Product Name" Binding="{Binding ProductName}"/>
            <Intersoft:UXGridViewTextColumn Header="Units In Stock" Binding="{Binding UnitsInStock}" Aggregate="Max" FooterFormatString="Max = {0}"/>
            <Intersoft:UXGridViewTextColumn Header="Unit Price" Binding="{Binding UnitPrice}" Aggregate="Avg" FooterFormatString="Avg = {0:n2}"/>
            <Intersoft:UXGridViewTextColumn Header="Units On Order" Binding="{Binding UnitsOnOrder}" Aggregate="Min" FooterFormatString="Min = {0}"/>
            <Intersoft:UXGridViewTextColumn Header="Quantity Per Unit" Binding="{Binding QuantityPerUnit}"/>
        </Intersoft:UXGridView.Columns>

    </Intersoft:UXGridView>


</Grid>

Furthermore, you can also customize the group values in more advanced scenarios such as grouping the data in a range of values. For examples, CategoryID: 1 - 3, CategoryID: 4 - 6, and so forth. The implementation can be seen in the code example below.

CS
Copy Code 
public class CustomGroupConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        int categoryID = (int)value;
        if (categoryID >= 1 && categoryID <= 3)
        {
            return "1 - 3";
        }
        else if (categoryID >= 4 && categoryID <= 6)
        {
            return "4 - 6";
        }
        else
        {
            return ">7";
        }            
    }

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

See Also
UXGridView Class
UXGridView Overview