Cell Merging

• Apr 15, 2018
• 3 minutes to read

The cell merging feature allows your applications to deliver data clarity and avoid duplication by merging neighboring data cells across different rows whenever they display matching values.

Cell merging is currently supported only by the Table View in the optimized mode (i.e. the TableView.UseLightweightTemplates property is not set to UseLightweightTemplates.None). To enable the feature, set the view’s TableView.AllowCellMerge property to true. You can disable it for certain columns by setting their ColumnBase.AllowCellMerge property to false. To customize cell merging behavior, use the TableView.CellMerge event.

The cell merging feature doesn’t prevent you from editing individual cells and supports major data shaping operations including sorting, grouping and master-detail.

Important

The cell merging feature is not supported in the following scenarios.

• The GridControl uses a multi-row Banded Layout.
• Multiselection is enabled in the GridControl.
• The DataViewBase.NavigationStyle property is set to GridViewNavigationStyle.Row

Example

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-merge-cells-in-the-gridcontrol-e4614.

Application.xaml

<Application x:Class="WpfApplication88.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

Application.xaml.vb

Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Threading.Tasks
Imports System.Windows

Namespace WpfApplication88
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application

    End Class
End Namespace

MainWindow.xaml.vb

Imports System
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.Linq
Imports System.Text
Imports System.Threading.Tasks
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes

Namespace WpfApplication88
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()

            Dim customers As New ObservableCollection(Of Product)()
            customers.Add(New Product() With {.ID = 0, .Name = "Product1", .Category = "Category1"})
            customers.Add(New Product() With {.ID = 1, .Name = "Product2", .Category = "Category1"})
            customers.Add(New Product() With {.ID = 2, .Name = "Product3", .Category = "Category2"})
            customers.Add(New Product() With {.ID = 3, .Name = "Product4", .Category = "Category2"})
            customers.Add(New Product() With {.ID = 4, .Name = "Product5", .Category = "Category1"})
            customers.Add(New Product() With {.ID = 5, .Name = "Product6", .Category = "Category3"})
            grid.ItemsSource = customers
        End Sub
    End Class

    Public Class Product
        Public Property ID() As Integer

        Public Property Name() As String
        Public Property Category() As String
    End Class
End Namespace

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" x:Class="WpfApplication88.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

        <dxg:GridControl AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True" Name="grid">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="Category"/>
                <dxg:GridColumn FieldName="ID"/>
                <dxg:GridColumn FieldName="Name"/>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView AllowPerPixelScrolling="True" ShowTotalSummary="True" AllowCellMerge="True"/>
            </dxg:GridControl.View>
        </dxg:GridControl>

    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication88
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            ObservableCollection<Product> customers = new ObservableCollection<Product>();
            customers.Add(new Product() { ID = 0, Name = "Product1", Category = "Category1" });
            customers.Add(new Product() { ID = 1, Name = "Product2", Category = "Category1" });
            customers.Add(new Product() { ID = 2, Name = "Product3", Category = "Category2" });
            customers.Add(new Product() { ID = 3, Name = "Product4", Category = "Category2" });
            customers.Add(new Product() { ID = 4, Name = "Product5", Category = "Category1" });
            customers.Add(new Product() { ID = 5, Name = "Product6", Category = "Category3" });
            grid.ItemsSource = customers;
        }
    }

    public class Product
    {
        public int ID
        {
            get;
            set;
        }

        public string Name
        {
            get;
            set;
        }
        public string Category
        {
            get;
            set;
        }
    }
}