Merge Grid Cells in a Row(Rowspan) dynamically.

[jinchul oh]

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: 

And the original data comes from database is in below format:
 

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

Attachment: sample_e0bd24a3.zip

[Saravanan Arunachalam]

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" />

             . . .

</ej:Grid>

function cellmerge(args) {

//Merging the cells based on condition

}

https://asp.syncfusion.com/demos/web/grid/cellmerging.aspx

https://help.syncfusion.com/api/js/ejgrid#events:mergecellinfo

https://help.syncfusion.com/api/js/ejgrid#members:allowcellmerging

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

https://www.syncfusion.com/downloads/support/forum/121068/ze/F121068-237097166

Regards,

Saravanan A.

[jinchul oh]

Hello Saravanan,

Thank you for your help.

I already know. 

http://asp.syncfusion.com/demos/web/grid/cellmerging.aspx 

http://help.syncfusion.com/js/api/ejgrid#events:mergecellinfo 

http://help.syncfusion.com/js/api/ejgrid#members:allowcellmerging 

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:

http://www.marss.co.ua/2010/01/how-to-merge-cells-with-equal-values-in.html

Best regards,

Jinchul Oh.

[Alan Sangeeth S]

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)

}

Regards,
Alan Sangeeth S

[yongfang qin]

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]

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">    

   <div> 

        <ej:Grid ID="FlatGrid" runat="server" AllowCellMerging="true" AllowSorting="True" AllowPaging="True" IsResponsive="true"> 

 

                ..... 

 

             <ClientSideEvents MergeCellInfo ="cellmerge" /> 

        </ej:Grid> 

    </div> 

     

    <script> 

        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) 

                        continue; 

                    else if (merInx + 1 == currentdata.indexOf(data[inx])) 

                        merInx++; 

                    else break; 

                } 

                if (rowInx != merInx) 

                    args.rowMerge(merInx - rowInx + 1); 

            } 

        } 

    </script> 

</asp:Content> 

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: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/F137122-720041393.zip 

Please refer the following link to know about allowCellMerging Property: 

https://help.syncfusion.com/api/js/ejgrid#members:allowcellmerging 

Please refer the following link to know about MergeCellInfo event: 

https://help.syncfusion.com/api/js/ejgrid#events:mergecellinfo 

Regards, 

Kuralarasan M.