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. Image for the cookie policy date

Merge Grid Cells in a Row(Rowspan) dynamically.

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

5 Replies

SA Saravanan Arunachalam Syncfusion Team 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.

JO jinchul oh 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.

AS Alan Sangeeth S Syncfusion Team 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

YQ yongfang qin 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.

KM Kuralarasan Muthusamy Syncfusion Team 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. 

Live Chat Icon For mobile
Up arrow icon