Click here to Skip to main content
15,036,441 members
Please Sign up or sign in to vote.
2.25/5 (3 votes)
See more:
i want to merge cells(row span or col span) in Kendo ui Grid, how we can do this?
Posted
Updated 23-Nov-16 3:01am
v2

Merging cells in Kendo UI grid is not supported

Please, read this: Dynamically Add / Remove Columns and Cell merge of Kendo UI grid[^]
   
yes, you are right "Merging cells in Kendo UI grid is not supported", so finally i had decided to merge cells after the rendering of kendo ui grid, so i used javascript to merge cells in DataBound event of kendo ui Grid.

function defition that i have called in databound event :
C#
function mergeGridRows(gridId, colTitle) {

    $('#' + gridId + '>.k-grid-content>table').each(function (index, item) {

        var dimension_col = 1;
        // First, scan first row of headers for the "Dimensions" column.
        $('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
            if ($(this).text() == colTitle) {

                // first_instance holds the first instance of identical td
                var first_instance = null;

                $(item).find('tr').each(function () {

                    // find the td of the correct column (determined by the colTitle)
                    var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');

                    if (first_instance == null) {
                        first_instance = dimension_td;
                    } else if (dimension_td.text() == first_instance.text()) {
                        // if current td is identical to the previous
                        // then remove the current td
                        dimension_td.remove();
                        // increment the rowspan attribute of the first instance
                        first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
                    } else {
                        // this cell is different from the last
                        first_instance = dimension_td;
                    }
                });
                return;
            }
            dimension_col++;
        });

    });
}




helper link : http://www.arsnova.cc/web-development-articles/2013-08-26/merging-table-cells-jquery-javascript[^]
   
v2
Comments
Maciej Los 11-Jan-14 9:27am
   
+5!
Solution 2 is good for kendo grid, but for the editable kendo grid, it will shift the next columns to the right by one column.

Here is a fix for this problem:

C#
function MergeGridRows(gridId, colTitle) {

        $('#' + gridId + '>.k-grid-content>table').each(function (index, item) {
            var dimension_col = 1;
            // First, scan first row of headers for the "Dimensions" column.
            $('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function() {
                var _this = $(this);
                if (_this.text() == colTitle) {
                    var bgColor = _this.css('background-color');
                    var foreColor = _this.css('color');
                    var rightBorderColor = _this.css('border-right-color');
                    // first_instance holds the first instance of identical td
                    var first_instance = null;
                    var cellText = '';
                    var arrCells = [];
                    $(item).find('tr').each(function() {
                        // find the td of the correct column (determined by the colTitle)
                        var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');

                        if (first_instance == null) {
                            first_instance = dimension_td;
                            cellText = first_instance.text();
                        } else if (dimension_td.text() == cellText) {
                            // if current td is identical to the previous
                            dimension_td.css('border-top', '0px');
                        } else {
                            // this cell is different from the last
                            arrCells = ChangeMergedCells(arrCells, cellText, true);
                            //first_instance = dimension_td;
                            cellText = dimension_td.text();
                        }
                        arrCells.push(dimension_td);
                        dimension_td.text("");
                        dimension_td.css('background-color', bgColor).css('color', foreColor).css('border-bottom-color', rightBorderColor);
                    });
                    arrCells = ChangeMergedCells(arrCells, cellText, false);
                    return;
                }
                dimension_col++;
            });

        });
    }

    function ChangeMergedCells = (arrCells, cellText, addBorderToCell) {
        var cellsCount = arrCells.length;
        if (cellsCount > 1) {
            var index = parseInt(cellsCount / 2);
            var cell = null;
            if (cellsCount % 2 == 0) { // even number
                cell = arrCells[index -1];
                arrCells[index -1].css('vertical-align', 'bottom');
            }
            else { // odd number
                cell = arrCells[index];
            }
            cell.text(cellText);
            if (addBorderToCell)
                arrCells[cellsCount -1].css('border-bottom', 'solid 1px #ddd');
            arrCells =[]; // clear array for next item
        }
        return arrCells;
    }
   
v6
multiple columns supported!

using in databound example :

C#
mergeGridRows("GridID", ["Column1", "Column2", "Column3"])



C#
function mergeGridRows(gridId, colTitles) {

        $('#' + gridId + '>.k-grid-content>table').each(function (index, item) {
            debugger;
            var dimension_col = 1;
            var sutunSayisi = parseInt($('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').size()) / 2;
            // First, scan first row of headers for the "Dimensions" column.
            $('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
                var indexOf = colTitles.indexOf($(this).text());
                if (indexOf>-1) {
                    // first_instance holds the first instance of identical td
                    var first_instance = null;
                    dimension_col = $(this).index() + 1;
                    $(item).find('tr').each(function () {
                        // find the td of the correct column (determined by the colTitle)

                        var dimension_td = $(this).find('td:nth-child(' + (dimension_col-(sutunSayisi-$(this).find('td').size())) + ')');

                        if (first_instance == null) {
                            first_instance = dimension_td;
                            
                            
                        } else if (dimension_td.text() == first_instance.text()) {
                            // if current td is identical to the previous
                            // then remove the current td
                            dimension_td.remove();
                            // increment the rowspan attribute of the first instance
                            first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : parseInt(first_instance.attr('rowspan')) + 1);
                            
                        } else {
                            // this cell is different from the last
                            first_instance = dimension_td;
                        }
                    });
                    return;
                }
            });

        });
    }
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900