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;
$('#' + 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');
var first_instance = null;
var cellText = '';
var arrCells = [];
$(item).find('tr').each(function() {
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) {
dimension_td.css('border-top', '0px');
} else {
arrCells = ChangeMergedCells(arrCells, cellText, true);
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) {
cell = arrCells[index -1];
arrCells[index -1].css('vertical-align', 'bottom');
}
else {
cell = arrCells[index];
}
cell.text(cellText);
if (addBorderToCell)
arrCells[cellsCount -1].css('border-bottom', 'solid 1px #ddd');
arrCells =[];
}
return arrCells;
}