Remove indenting when grouping kendo grid

0 Answers 14 Views
Grid
Jenna
Top achievements
Rank 1
Jenna asked on 23 May 2024, 06:46 PM
Is there a way to prevent a groupable kendo grid from indenting and resizing columns when grouping, so that all columns stay the same width and group headers all fill the width of the grid? 
Georgi
Telerik team
commented on 28 May 2024, 01:37 PM

Hi Jenna, 

Thank you very much for the details provided.

From what I understood from your question, you are currently utilizing the Kendo UI for Angular Grid and are looking for an approach that would allow you to remove the indenting(first column), which is rendered during grouping, and prevent the columns from resizing when the component is already grouped. Please let me know if I misinterpreted the requirement.

I will address the questions in numerical order so that it is easier for you to keep track of the response.

1. Remove the indenting

One possible approach that would allow the developer to prevent the Grid from rendering the first column, which acts as indenting during grouping, would be to utilize the .k-grid .k-group-col CSS selector and adjust the value of the width property:

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

It is important to mention that the encapsulation meta data should be set to ViewEncapsulation.None:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/custom-styles/

2. Prevent resizing in a grouped Grid

When it comes to preventing the resizing of the Grid columns when the component has already been grouped, what I would suggest would be for the developer to handle the built-in groupChange event and programmatically control the value of the resizable property depending on the grouping inside the component:

public groupChange(groups: GroupDescriptor[]): void {
    this.groups = groups;
    if (groups.length > 0) {
        this.resizable = false;
    } else {
        this.resizable = true;
    }
    this.loadProducts();
}

For your convenience, I am sending you a StackBlitz demo that implements the above-mentioned suggestions:

https://stackblitz.com/edit/angular-qfaq4b

In case none of the provided information helps you achieve the desired customizations, I would ask you to provide more detailed information about the expected end result. This would allow me to gain a more detailed understanding of the exact scenario and thus come up with a more case-specific suggestion.

I hope this helps. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Jenna
Top achievements
Rank 1
Share this question
or