Freezing column headings Kendo grid Angular 2

user_4449595 0
Viewed 1056

How can I freeze the heading row of kendo grid while vertical scrolling of the grid (like we do 'Freeze Panes' in excel)? After reading the kendo-grid api, I tried using [headerStyle]="{'position': 'fixed'}" in kendo-grid-column tag but it makes all the headings overlap each other. Any suggestions are appreciable.

kendo-grid angular
1 Answers

In that case you have to set scrollable ='scrollable' property of grid and set gridContent to overflow-y auto.

.k-grid-content {
    height: inherit;
    overflow-y: auto;
}

Set grid in HTML as below:

<kendo-grid id="grdView" 
        [ngStyle]="setStyles()"
        [data]="yourDatabse"
        [scrollable]="'scrollable'"
        [height]="gridNewHeight"
>

Then after set gridContent height in backend as below:

let height:number=300;
public setStyles(): any {
    this.gridNewHeight = this.height;

    let styles = {
        'height': (this.gridNewHeight - 45) + 'px'
    };

    let gridHeaderHeight: number =40;

    let gridContent: any = this.el.nativeElement.getElementsByClassName('k-grid-content')[0];
    if (gridContent != null) {
       gridContent.style.height = (this.gridNewHeight - (gridHeaderHeight )) + 'px';
    }

    return styles;
}
user_66066300
Related