# Merging

## Content



FlexGrid supports merging of cells that have the same content. To enable cell merging, set the [AllowMerging](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.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-core/dotnet-api/C1.AspNetCore.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-core/dotnet-api/C1.AspNetCore.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-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.Grid.AllowMerging.html) property to Cells. The example uses Sale.cs model, which was added to the application in the [QuickStart](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/FlexGrid/FlexGridQuickStart):

![](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/flexgridmerging.png)

The following code examples demonstrate how to enable Merging in the FlexGrid:

#### In Code

**MergingController.cs**

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

**Merging.cshtml**

```html
@using TagFlexGrid.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
<c1-flex-grid auto-generate-columns="false" allow-merging="@AllowMerging.Cells"
              is-read-only="true" class="grid">
    <c1-flex-grid-column binding="ID" width="80"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product" allow-merging="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color" allow-merging="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Discount" width="100" format="p0"></c1-flex-grid-column>
    <c1-items-source source-collection="@Model"></c1-items-source>
</c1-flex-grid>
```

## 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-core/dotnet-api/C1.AspNetCore.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-core/dotnet-api/C1.AspNetCore.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/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/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
<c1-flex-grid auto-generate-columns="false" is-read-only="false" class="grid" 
              allow-merging="All" paste-empty-cells="false">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-flex-grid-column binding="ID" width="80"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product" allow-merging="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color" allow-merging="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Discount" format="p0" width="100"></c1-flex-grid-column>
</c1-flex-grid>
```