Is it possible to hide or remove the group header from a kendo grid when grouping is used ?
We are coding with Angular 5.
Is it possible to hide or remove the group header from a kendo grid when grouping is used ?
We are coding with Angular 5.
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;
}
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
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
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.