Removing Grid Grouping Indentation

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

The Kendo UI for Angular Grid automatically inserts a designated column that indents the columns once the component has been grouped. How can I remove/hide the indentation of the Grid with grouping enabled?

Solution

To hide the indentation inside a grouped Grid:

1. Utilize the .k-grid .k-group-col CSS selector and set the width of the indentation column to 0.

   css

   .k-grid .k-group-col {
   		width: 0px;
   }

2. Set the Angular ViewEncapsulation to None. Otherwise, the custom styles will not be applied unless they are provided on a global level.

3. (Optional) Use the the following CSS selectors to remove the double border that appears on the first column.

   css

   .k-grid .k-table-th.k-group-cell + .k-table-th:nth-child(2){
   		border-inline-start-width: 0px;
   }
   
   .k-grid .k-table-td.k-group-cell + .k-table-td:nth-child(2){
   		border-inline-start-width: 0px;
   }

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

See Also

• Grid Overview
• API Reference of the Grid Component
• API Reference of the TextBox Component
• Grid Filtering