在Kendo Grid的默认组列上禁用/删除关闭图标 [英] Disable/remove close icon on Kendo Grid's default group column

问题描述

我将Kendo UI Grid用于我的解决方案之一.我有一个任务/需求，我应该能够为网格提供默认分组，而用户则不能从UI中删除此分组.

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.

有一种实现此目标的方法，例如jsFiddle示例: http://jsfiddle.net/siva_hari/xzLfgsba/4/

There is one way of achieving this as in this jsFiddle example: http://jsfiddle.net/siva_hari/xzLfgsba/4/

如果您看下面的示例，则分组是正确的，但是可以通过单击k-group-delete图标或将分组的列拖回到网格中来更改分组. http://jsfiddle.net/siva_hari/xzLfgsba

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

但是此解决方案存在一个问题，您没有组头(因为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?

谢谢.

推荐答案

禁用关闭手柄(X按钮)很简单，只需将其隐藏即可.我可以通过编程方式将其隐藏，但使用CSS更为有效.

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;
} 

下一步是摆脱分组指示符的可拖动属性.为此，我们销毁了可拖动的容器.我们需要在 之后执行此操作，因为每次调用dataBound时都会重新应用网格属性.

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是使它在所有dataBound和自然kendo代码完成运行之后运行所必需的.这是此解决方案的 小提琴 .

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.

这篇关于在Kendo Grid的默认组列上禁用/删除关闭图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！