Kendo Grid supports Locked area so that when user scrolls using horizontal scrollbar, some of the columns can be locked and remains in visible area.

If you have one or more locked columns in the kendo grid and you have allowed grouping in this grid, then you would have noticed following issue. When user groups any of the column, its title displays in the locked area and grid looks ugly. Here is the example:

To avoid above error we need to display the grouped header under the unlocked area. Here is an example of how to achieve that.

//fix group header in locked area
kendo.ui.Grid.fn.displayGroupHdrInUnlockedArea = function() {
 var grid = this;
 this.lockedTable.find(".k-grouping-row").each(function(index) {
 var arrow = $(this).find("a");
 grid.tbody.find(".k-grouping-row:eq(" + index + ") td").text($(this).text())
 $(this).find("p").text(" ").append(arrow);
 })
}//displayGroupHdrInUnlockedArea

//configure following with grid configuration
dataBound: function(e){
 this.displayGroupHdrInUnlockedArea(); 
},

Here is how the grid will look after applying this fix.

For a live demo visit - http://dojo.telerik.com/izaZ