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

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.

you do not have the group header(because the groupable is set to false) and you cannot sort based on the group it self were you referring to the first fiddle for this? If so, you can still sort by clicking on the regular grid column headers — gitsitgo
@gitsitgo: Thanks for the response. Yes, I can sort by clicking on the column header it self. I just want to see if I can enable grouping and also disable the close button in the grouped button so that the user is not able remove the group. — Siva

gitsitgo gitsitgo · Accepted Answer · 2015-04-16T05:38:09

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.

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

1 Answers