0

Is it possible to hide or remove the group header from a kendo grid when grouping is used ?

We are coding with Angular 5.

2
  • I am looking for the same thing... any ideas?
    – Ovi
    Commented Jul 30, 2018 at 6:48
  • @Ovi Have posted the answer below, hope not too late. Commented Oct 20, 2018 at 9:42

4 Answers 4

2

Add the following CSS to your stylesheet to override default Kendo UI Angular CSS

If you want to hide the header text

.k-grid .k-grouping-row p {
    display: none !important;
}

If you want to hide the header row

.k-grid .k-grouping-row td {
    display: none !important;
}
2

The [groupable] attribute can toggle this on and off.

[groupable]="true"

[groupable]="false"

e.g.

<kendo-grid [data]="gridData" [groupable]="true"
    [group]="state.group" "></kendo-grid>

This works with angular 7

0

Either create a separate css file file for resetting kendo styles and put below code and link in index.html(i applies to all grids you use in your app)

.k-grid-header {
  display: none !important;
}

Or, put this code in the component stylesheet.

:host /deep/ .k-grid-header {
  display: none !important;
}

This will reset kendo css, also will also override styles if you have a kendo reset linked to your index.html

0

Using ::ng-deep .k-grouping-header-flex { display: none !important; } ::ng-deep accesses the default element of the kendo grids. if you are still facing issues when applying styles I may also be related to your hierarchy double check if the hierarchy is correctly defined inside the CSS files.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.