<style>
tr.k-grid-extra-header th.group {
text-align: center;
border-bottom-width: 1px;
}
</style>
<script>
function addGroupHeaderToKendoGrid($grid, mergeOptions) {
var $headerRow = $grid.find(".k-grid-header thead > tr");
var $newRow = $("<tr class='k-grid-extra-header'></tr>");
var idx = 0;
var $ths = $headerRow.children("th");
//add empty cell for th not to merge and move text upper
function addEmptyTH(seq) {
$newRow.append("<th class='k-header stuff'> </th>");
$ths.eq(seq).children().css({
position: "absolute", zIndex: "10",
top: $headerRow.height() * 3 / 4
});
}
for (var p in mergeOptions) {
var mergeSet = mergeOptions[p];
for (var i = idx; i < mergeSet.pos; i++) {
addEmptyTH(i);
}
$newRow.append("<th class='k-header group' colspan='" +
mergeSet.count + "'>" + p + "</th>");
idx = mergeSet.pos + mergeSet.count;
}
//add empty cell for rest columns
for (var i = idx; i < $ths.length; i++) addEmptyTH(i);
$headerRow.parent().prepend($newRow);
//extend the .k-grid container's height
var $container = $headerRow.closest(".k-grid");
$container.height($container.height() + $newRow.height());
}
</script>