How to merge cells in Kendo UI Grid

Question

I don't see anything in the official documentation of Kendo UI. Just checking if somebody has done customization to merge the cells in Kendo UI Grid.

I have content like this:

Technology       Core Language & Communication                                15
----------------------------------------------------------------------------------
Technology       Mathematics & Application                                    20
----------------------------------------------------------------------------------
Technology       Science Application & Understanding                          30
---------------------------------------------------------------------------------
Communication    Using language to reason, interpret & analyse                40
---------------------------------------------------------------------------------
Communication    Using visualization for design/creating                      40

I need to get the following output:

Technology       Core Language & Communication                                15
                 -----------------------------------------------------------------
                 Mathematics & Application                                    20
                 -----------------------------------------------------------------
                 Science Application & Understanding                          30
---------------------------------------------------------------------------------
Communication    Using language to reason, interpret & analyse                40
                 -----------------------------------------------------------------
                 Using visualization for design/creating                      40

Not sure how will it be done by using template.

I would probably use a nested grid – Matt Millican Sep 05 '14 at 14:21 — Matt Millican, Sep 05 '14 at 14:21

score 2 · Answer 1 · answered Sep 06 '14 at 06:23

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 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++;
    });

});
}

More Details

score 1 · Answer 2 · answered Sep 03 '18 at 09:19

I'm extending the above code which handles all scenario's.

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', 'white').css('color', 'black').css('border-bottom-color', 'transparent');
                });
                arrCells = ChangeMergedCells(arrCells, cellText, true);
                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
    }
    if (cellsCount == 1) {
        cell = arrCells[0];
        cell.text(cellText);
        arrCells[0].css('border-bottom', 'solid 1px #ddd');
        arrCells = [];
    }
    return arrCells;
}

What is "above"? Note that sorting isn't fixed. – Gert Arnold Mar 09 '22 at 14:10 — Gert Arnold, Mar 09 '22 at 14:10

score 0 · Answer 3 · answered Feb 10 '20 at 07:13

I am Extend The above Code For Which is Support To Multiple Grid Columns Merge The Names Using Grid databound. Need to Make a Function Call ---> MergeGridRows(GridId, ["Column1","Column2","Column3",..,"ColumnNth"]); <---

function MergeGridRows(gridId, colTitles) {
    debugger;
    $(gridId + '>.k-grid-content-locked>table').each(function (index, item) {


        $(gridId + '>.k-grid-header>.k-grid-header-locked>table').find('th').each(function () {
            var _this = $(this);
            var IsExistVal = $.grep(colTitles, function (e) { return e == _this.text(); });
            if (IsExistVal.length > 0) {

                 // First, scan first row of headers for the "Dimensions" column.
                var dimension_col = colTitles.indexOf(_this.text()) + 1;


                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 PrevCombText = '';
                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 + ')');
                    var FullTxt = "";
                    for (var CellInd = dimension_col-1; CellInd > 0; CellInd--) {
                        FullTxt += $(this).find('td:nth-child(' + CellInd + ')').text();
                    }

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

    });
}

function ChangeMergedCells(arrCells, cellText, addBorderToCell) {
    //Clusters are taken from the code every where (not anything from DB)
    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
    }
    if (cellsCount == 1) {
        cell = arrCells[0];
        cell.text(cellText);
        arrCells[0].css('border-bottom', 'solid 1px #ddd');
        arrCells = [];
    }
    return arrCells;
}

What is "above"? Note that sorting isn't fixed. – Gert Arnold Mar 09 '22 at 14:10 — Gert Arnold, Mar 09 '22 at 14:10

score -1 · Answer 4 · answered May 20 '20 at 01:30

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 = [];
                var prev = null;
                $(item).find('tr').each(function (i) {
                    // find the td of the correct column (determined by the colTitle)
                    var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');
                    dimension_td.css('background-color', 'white').css('color', 'black').css('border-bottom-color', 'transparent');
                    !dimension_td.data("cell") && dimension_td.attr("data-cell", dimension_td.text())
                    if (first_instance == null) {
                        first_instance = dimension_td;
                        cellText = first_instance.data("cell");
                    } else if (dimension_td.data("cell") == cellText) {
                        // if current td is identical to the previous
                        dimension_td.css('border-top', '0px');
                    } else {
                        prev.css('border-bottom', 'solid 1px #ddd');
                        arrCells = ChangeMergedCells(arrCells, cellText, false);
                        cellText = dimension_td.data("cell");
                    }
                    prev = dimension_td;
                    arrCells.push(dimension_td);
                    dimension_td.text("");
                });
                arrCells = ChangeMergedCells(arrCells, cellText, true);
                return;
            }
            dimension_col++;
        });

    });
}
function ChangeMergedCells(arrCells, cellText, isLastCell) {
    var cellsCount = arrCells.length;
    if (cellsCount > 1) {
        var index = Math.ceil(cellsCount / 2);
        arrCells[index - 1].text(cellText);
    }
    if (cellsCount == 1) {
        arrCells[0].text(cellText);
    }
    isLastCell && arrCells[cellsCount - 1].css('border-bottom', 'solid 1px #ddd');
    arrCells = [];
    return arrCells;
}

Welcome to Stack Overflow. Code dumps without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please [edit](https://stackoverflow.com/posts/61903605/edit) your question and explain how it works better than what the OP provided. — Özgür Can Karagöz, May 20 '20 at 01:57

How to merge cells in Kendo UI Grid

4 Answers4

Linked