Disable/remove close icon on Kendo Grid's default group column - kendo-grid

Question

I am using Kendo UI Grid for one of my solutions. I have this one task/requirement where I should be able to give a default grouping for the grid, and the user should not be able to remove this grouping from the UI.
There is one way of achieving this as in this jsFiddle example: http://jsfiddle.net/siva_hari/xzLfgsba/4/
If you look at the following example, the grouping is true but the grouping can be changed by clicking on k-group-delete icon or by dragging the grouped column back into the grid.
http://jsfiddle.net/siva_hari/xzLfgsba
group: [{field: "ShipName"}],
groupable: false
But there is one one problem with this solution, you do not have the group header(because the groupable is set to false) and you cannot sort based on the group it self.
Is there a way to show group header and also disable further changes to grouping of the grid?
Thank you.

Answer 1

Disabling the close handle (X button) is simple, just hide it. I can hide it programmatically but using CSS is much more effective.
span.k-icon.k-group-delete{
display:none;
}
Next step is to get rid of the draggable property of the grouping indicator. To do this, we destroy the draggable container. We need to do this after dataBound because the grid properties are re-applied every time dataBound is called.
dataBound:function(e){
setTimeout(function(){
//get the indicator header
var groupIndicatorHeader = $('.k-group-indicator').parent();
if(!groupIndicatorHeader) return;
//check if it is draggable eneabled
var kendoDraggableObj = $(groupIndicatorHeader).data('kendoDraggable');
if(kendoDraggableObj) kendoDraggableObj.destroy();
},0);
}
setTimeout is necessary to make it run after all dataBound and natural kendo code has finished running. Here is the fiddle for this solution.
You will probably notice that this solution is very hacky, and it is. But sometimes you just gotta roll with it to get the customization you need.