# Merging

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



FlexGrid supports merging of cells that have the same content. To enable cell merging, set the [AllowMerging](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Grid.AllowMerging.html) property to indicate what part or parts of the grid you want to merge. You can set the [AllowMerging](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Grid.AllowMerging.html) property on specific row and column objects. Possible values are None, Cells, ColumnHeaders, RowHeaders, AllHeaders and All.

Once you have set the [AllowMerging](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Grid.AllowMerging.html) property to one of these possible values, the FlexGrid automatically merges cells, grouping the data visually.

The following image shows how the FlexGrid appears after setting the [AllowMerging](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Grid.AllowMerging.html) property to Cells.

![Merging performed in FlexGrid](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgridmerging.png)

The following code examples demonstrate how to enable Merging in the FlexGrid. The example uses Sale.cs model, which was added to the application in the [QuickStart](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart):

#### In Code

**MergingController.cs**

```csharp
public ActionResult MergeCells()
{
    return View(Sales.GetData(15));
}
```

**Merging.cshtml**

```razor
@using MVCFlexGrid.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
@(Html.C1().FlexGrid<Sale>()
    .AllowMerging(C1.Web.Mvc.Grid.AllowMerging.Cells)
    .AutoGenerateColumns(false)
    .IsReadOnly(true)
    .Bind(Model)
    .CssClass("grid")
    .Columns(columns =>
    {
        columns.Add(column => column.Binding("ID").Width("80"));
        columns.Add(column => column.Binding("Country"));
        columns.Add(column => column.Binding("Product").AllowMerging(true));
        columns.Add(column => column.Binding("Color").AllowMerging(true));
        columns.Add(column => column.Binding("Amount").Format("c"));
        columns.Add(column => column.Binding("Discount").Width("100").Format("p0"));   
    })
)
```

## Clipboard Support for Merged Cells

When performing clipboard operations on a cell range in a grid, sometimes the merged cells are not copied properly. FlexGrid provides a solution for this problem through its [PasteEmptyCells](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.PasteEmptyCells.html) property. This property determines whether on pasting cells, all cells along with the empty cells get pasted or not. Additionally, it provides [SkipMerged](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.SkipMerged.html) property that allows to enable or disable the feature skipping the merged cells when copying cells.

![Pasting merged cells in FlexGrid even when they are empty](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgrid-pasteemptycell.gif)

The following code demonstrates the use of **PasteEmptyCells** and **SkipMerged** properties. This example uses the data and the sample used above. To run the sample, replace the code from "Merging.cshtml" with the code given below:

```razor
@(Html.C1().FlexGrid<Sale>()
    .AllowMerging(AllowMerging.All)
    .AutoGenerateColumns(false)
    .IsReadOnly(false)
    .CssClass("grid")
    .SkipMerged(true)
    .PasteEmptyCells(true)
    .Bind(Model)
    .Columns(columns =>
    {
        columns.Add(column => column.Binding("ID").Width("80"));
        columns.Add(column => column.Binding("Country"));
        columns.Add(column => column.Binding("Product").AllowMerging(true));
        columns.Add(column => column.Binding("Color").AllowMerging(true));
        columns.Add(column => column.Binding("Amount").Format("c"));
        columns.Add(column => column.Binding("Discount").Width("100").Format("p0"));
    })
)
```

## See Also

[Quick Start](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart)

**Reference**

[AllowMerging Enumeration](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Grid.AllowMerging.html)

[FlexChartBase\<T> Class](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexChartBase-1.html)