Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Collapse]Getting Started
    [Collapse]Walkthroughs
     [Expand]Appearance and Conditional Formatting
     [Expand]Data Editing
     [Expand]Hit Information
     [Expand]Data Binding and Working with Columns
     [Collapse]Grid View - Columns, Rows and Cells
       Tutorial: Column Resizing
       Tutorial: Best Fit Option
       Tutorial: Auto Width Mode
       Tutorial: Fixed Columns
       Tutorial: Column Reordering
       Tutorial: Column Visibility
       Tutorial: Column Chooser API
       Tutorial: Auto Row Height
       Tutorial: Cell Merging
       Tutorial: Identifying Rows
       Tutorial: Row Height and Layout Basics
     [Expand]Banded Views
     [Expand]WinExplorer View
     [Expand]Tile View
     [Expand]Grouping
     [Expand]Filter and Search
     [Expand]Sorting
     [Expand]Summaries
     [Expand]Split Presentation
     [Expand]Row Preview Sections
     Data Grid and Views
   [Expand]Data Binding
   [Expand]Views
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Filter and Search
   [Expand]Summaries
   [Expand]Focus and Selection Handling
    Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
    Scrolling
   [Expand]Batch Modifications
   [Expand]Hit Information
    Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tutorial: Cell Merging

This walkthrough is a transcript of the Cell Merging video available on the DevExpress YouTube Channel.

The grid control can merge cells vertically thus provide clearer data presentation for Views with many repeated values. In this tutorial, you will learn how to enable the cell merging feature for an entire View or individual columns. You will also see how you can change the algorithm that determines if two neighboring cells are to be merged.

Expanded Starting Point

Start with a grid control displaying data in the usual format.

Expanded Enabling Cell Merging

At design time, access the View's properties, then expand GridView.OptionsView and enable the GridOptionsView.AllowCellMerge option.

As the grid provides no default UI for cell merging, create a button handler that would toggle that same option at runtime.

Run the application and notice that column cells that have the same value are merged. Click the button to see how the layout changes when cell merging is enabled or disabled.

Note that you can enable a more readable view by sorting columns that have repeated values. This puts identical values next to each other and thus the View joins bigger chunks of data into merged cells.

Expanded Disabling Cell Merging for Individual Columns

Now select the Priority column to access its properties, expand GridColumn.OptionsColumn and then disable the OptionsColumn.AllowMerge option.

Run the application to see that priority cells aren't merged anymore, while the feature is still enabled for other columns.

Expanded Implementing Custom Cell Merging Algorithm

Now you can notice that email addresses in the Created By column have repeated domains. You can change the cell merging algorithm so that all cells with the same domain are merged together.

Select the grid View and access its event to write a ColumnView.CustomColumnDisplayText handler. The code checks if the Create By column is being processed. Cell display text (or email address) is obtained from the CustomColumnDisplayTextEventArgs.DisplayText parameter. The handler then retrieves the substring with a domain name and assigns it back to CustomColumnDisplayTextEventArgs.DisplayText.

Run the application. You'll see that domain names are displayed in cells, but no merging occurs, since the feature still relies on cell values rather than display text.

To fix this, write a GridView.CellMerge event handler. First, check if the correct column is being processed. Then, obtain display texts for the two cells being compared. Finally, indicate that cells are to be merged if their display texts match. Set the CellMergeEventArgs.Handled parameter to true to override the grid's default processing for this column.

Now run the application to see that cells are being merged based on domain information.

Expanded See Also

How would you rate this topic?​​​​​​​