We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Merge Grid Cells in a Row(Rowspan) dynamically.

Thread ID:





121068 Nov 8,2015 05:12 PM UTC Apr 20,2018 11:24 AM UTC ASP.NET Web Forms 5
Tags: Grid
jinchul oh
Asked On November 8, 2015 05:12 PM UTC

I need to display data in grid view with merged rows for some columns. Please help me to prepare a grid view in below defined format: enter image description here

And the original data comes from database is in below format:
 enter image description here

Please help me to find best way for doing this task dynamically and efficiently.

Attachment: sample_e0bd24a3.zip

Saravanan Arunachalam [Syncfusion]
Replied On November 9, 2015 08:25 AM UTC

Hi Jinchul,

Thanks for contacting Syncfusion Support.

Use “AllowCellMerging” property of Grid to enable the cell merging feature in Grid Control. Using “MergeCellInfo” event of Grid we can customize cells to be merged. Please refer to the code example, online sample link and online document link:

<ej:Grid ID="EmployeeGrid" runat="server" AllowCellMerging="true">

            <ClientSideEvents MergeCellInfo ="cellmerge" />

             . . .


function cellmerge(args) {

//Merging the cells based on condition





We have created a sample that you can download from the below link.



Saravanan A.

jinchul oh
Replied On November 9, 2015 12:29 PM UTC

Hello Saravanan,

Thank you for your help.

I already know. 

But I know how to automatically merge cells. 

For example, compare the top(current row) and bottom(next row) of the cell and would like to know how to merge same.

I would like to know how the automatically calculated as follows:


Best regards,
Jinchul Oh.

Alan Sangeeth S [Syncfusion]
Replied On November 10, 2015 09:11 AM UTC

Hi Jinchul,
Thanks for the update.

Current cell element will passed to the Grid event “mergeCellInfo” by which you can traverse and find the corresponding cell value in previous row. Please refer to the following code example.

function cellmerge(args) {

var cell = args.cell;

var cellIndex = args.cell.cellIndex

var prevvRow = $(args.cell).closest("tr").prev();

var prevCell = $(args.cell).closest("tr").prev().find("td:eq(“+cellIndex+”)")

if(cell.text() == prevCell.text())

args.merge(prevRow.rowIndex, $(args.cell).closest("tr")[0].rowIndex)


Alan Sangeeth S

yongfang qin
Replied On April 19, 2018 04:35 PM UTC

Hi Syncfusion Team,

I want to use Merge Grid Cells in a Row dynamically. But the code blow is not work right now.
Could you please help me.

Kuralarasan Muthusamy [Syncfusion]
Replied On April 20, 2018 11:24 AM UTC

Hi Yongfang, 

We could not found any code from your last update. So please share respective grid code for further assistance. But we suspect that you want to merge the rows. Please set the AllowCellMerging property as true before merging the rows. We have achieved your requirement by using MergeCellInfo event and rowMerge method of the grid. We have also prepared the sample with your requirement. 

Please refer the following code example: 

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">    
        <ej:Grid ID="FlatGrid" runat="server" AllowCellMerging="true" AllowSorting="True" AllowPaging="True" IsResponsive="true"> 
             <ClientSideEvents MergeCellInfo ="cellmerge" /> 
        function cellmerge(args) { 
            if (args.column.field == "ShipCity" && !$(args.cell).hasClass("e-merged")) { 
                var rowInx = this.getIndexByRow(args.cell.closest("tr")); 
                var merInx = rowInx; 
                var pageSize = this.model.currentViewData.length; 
                var prevRow = null, nexRow = null; 
                var data = ej.DataManager(this.model.currentViewData).executeLocal(new ej.Query().where("ShipCity", "equal", args.data["ShipCity"])); 
                for (var inx = 0; inx < data.length; inx++) { 
                    var currentdata = this.model.currentViewData; 
                    if (currentdata.indexOf(data[inx]) == merInx) 
                    else if (merInx + 1 == currentdata.indexOf(data[inx])) 
                    else break; 
                if (rowInx != merInx) 
                    args.rowMerge(merInx - rowInx + 1); 

In this code example we have used currentViewData of the grid to collect the duplicate values from the grid. Based on this duplicate value we have merged the rows by using rowMerge method. 

Please refer the following link to sample: 

Please refer the following link to know about allowCellMerging Property: 

Please refer the following link to know about MergeCellInfo event: 

Kuralarasan M. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon