Merging cells with the same value

[Henry Wokhwera]

How would i merge cells with the same value vertically in asp.net core ejs.grid

[Balaji Sekar]

Hi Henry Wokwera, 

 

Greetings from the Syncfusion support, 

 

We have built-in support for cell merging in vertical and horizontal direction in the Syncfusion Grid. Please refer the below demo sample for more information. 

 

Demo samples: 

 

Row(Vertical) spanning: https://ej2.syncfusion.com/aspnetcore/Grid/RowSpanning#/material 

Column(Horizontal) spanning: https://ej2.syncfusion.com/aspnetcore/Grid/ColumnSpanning#/material 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar 

[Henry Wokhwera]

thank you for these examples, but how would I automate the row spans depending on the number of rows with the value?

[Balaji Sekar]

Hi Henry Wokwera, 

 

Thanks for your patience. 

 

Using dataBound event, we have customized to row spanning the repeated cells into a single one in the Grid OrderID column. The duplicate row cells can also be merged using the following example code and sample for more information. 

[Index.cshtml] 

function dataBound() { 

        var previousData = null; 

        var stRowIndex = null; 

        var endRowIndex = null; 

        var grid = this; 

        var rows = this.getRows(); 

        var data = this.getCurrentViewRecords(); 

 

        for (var i = 0, len = rows.length; i < len; i++) { 

            if (!previousData) { 

                previousData = data[i]['OrderID']; 

                stRowIndex = parseInt(rows[i].getAttribute("aria-rowindex")); 

            } 

            else if (previousData === data[i]['OrderID']) { 

                rows[i].children[0].classList.add('e-hide'); 

            } 

            else if (previousData && previousData !== data[i]['OrderID']) { 

                if (this.getRows().length > 0 && this.getRows().length > stRowIndex) { 

                    endRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10); 

                    var targetCell = 

                        [].slice.call(this.getRows()[stRowIndex].querySelectorAll('.e-rowcell')).filter((cell) => 

                            parseInt(cell.getAttribute('aria-colindex'), 10) === parseInt(rows[i].children[0].getAttribute('aria-colindex'))); 

                    targetCell[0].setAttribute("rowSpan", endRowIndex - stRowIndex); 

                    previousData = data[i]['OrderID']; 

                    stRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10); 

                } 

            } 

            if (rows[i].children[0].classList.contains("e-hide") || i < len) { 

                endRowIndex = parseInt(rows[i].getAttribute("aria-rowindex"), 10); 

                if (endRowIndex > 0) { 

                    var targetCell = [].slice.call(this.getRows()[stRowIndex].querySelectorAll('.e-rowcell')).filter((cell) => 

                        parseInt(cell.getAttribute('aria-colindex'), 10) === parseInt(rows[i].children[0].getAttribute('aria-colindex'))); 

                    targetCell[0].setAttribute("rowSpan", endRowIndex + 1); 

                } 

            } 

        } 

    } 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/153867/ze/Sample20595633531023491912.zip  

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar