Telerik UI for Windows 8 HTML

You can easily prevent the user from collapsing groups by removing the collapse icon from the DOM. This would be useful in scenarios where your requirement is to always show groups expanded or to perform only programmatic expand/collapse of groups (when you want to change the user experience for interacting with groups in RadGrid).

Preventing Groups Collapse

The easiest way to achieve this is to remove the collapse icon from the DOM—this would result in two things:

  • There will be no visual clue of the headers being collapsible.

  • RadGrid performs a check whether there is an icon with the k-i-collapse class name applied in the header element before collapsing it. If there isn't, the logic for group collapse does not run. This means that even clicking the header does not collapse the group.

To hide the icon, you can attach the databound event and use the code from the following code snippet:

JavaScript Copy imageCopy
function preventCollapse(e) {
    $(".k-grouping-row .k-icon",;

If you attach the databound event using the addEventListener method, after RadGrid is created, you may need to call grid.refresh() for RadGrid to capture the event and hide the icon.

This implementation is part of our SDK Examples and is available for download at the following link: Telerik Windows 8 HTML SDK under Grid/PreventingGroupsExpandCollapse.

See Also