How to merge cells in 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 :

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[^]

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:

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

multiple columns supported!

using in databound example :

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

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

        });
    }