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.
Unfortunately, activation email could not send to your email. Please try again.

Merge Grid Cells in a Row(Rowspan) dynamically.

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 03:25 AM

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

}


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

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

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

Regards,

Saravanan A.


jinchul oh
Replied On November 9, 2015 07:29 AM

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:

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



Best regards,
Jinchul Oh.

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

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
Replied On April 19, 2018 12:35 PM

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 07:24 AM

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: 


Please refer the following link to know about allowCellMerging Property: 


Please refer the following link to know about MergeCellInfo event: 



Regards, 
Kuralarasan M. 


CONFIRMATION

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.

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.

;