horizontal scroll resets in angular kendo grid when using autofitcolumns on a dynamic content grid

1 Answer 18 Views
Grid
Aaron
Top achievements
Rank 1
Aaron asked on 04 Nov 2025, 11:47 AM

I'm rendering a kendo-grid that receives data dynamically in runtime and required to autofit the columns continuously as data arrives.

I've used autoFitColumns() on the ngAfterViewChecked lifecycle hook to keep autofitting with each new data arrival. but each autofit resets the view of the grid and the horizontal scroll is reset to the start.

I searched for other issues regarding the subjects but none worked for this scenario.
tried solutions:

  1. using ngZone and subscribing to OnStable
  2. saving the scrollLeft property of '.k-grid-content' and and assigning the value to it after the autoFitColumns() call
  3. calling autoFitColumns on specific changes within ngOnChanges.


without autofit there are no issues despite many dynamic data changes.

template parameters:

<kendo-grid
#grid
[kendoGridBinding]="gridData"
[skip]="skip"
[resizeable]="true"
....>

component (simplified)


export class Component {
@Input() columns$: Observable<TableColumns[]>
@Input gridData: any[];
@ViewChild(GridComponent) grid: GridComponent;

ngOnInit(){
this.columns$?.pipe(filter((cols)=> !!cols && cols.length > 0)).subscribe......
}

ngAfterViewChecked() {
this.grid?.autoFitColumns();
}

Help is appreciated.

1 Answer, 1 is accepted

Sort by
0
Martin Bechev
Telerik team
answered on 07 Nov 2025, 08:54 AM

Hi Aaron,

    Instead of using ngAfterViewChecked, call autoFitColumns() only when your data or columns actually change. For example, subscribe to your data or columns Observable and trigger autofit in the subscription. This reduces unnecessary calls and scroll resets.

    If your grid data changes dynamically, trigger autoFitColumns() in the event or method that updates your data, not in a lifecycle hook that runs on every change detection cycle. 

    To minimize layout shifts, call autoFitColumns() with specific column field names:

    this.grid?.autoFitColumns(['columnFieldName']);
    

    To keep the scroll position, consider storing the scrolled pixels and manually scroll the Grid with custom JavaScript or programmatically scroll the Grid using some of the built-in Grid methods:

    https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes#programmatically-scrolling-the-grid

    Regards,


    Martin Bechev
    Progress Telerik

    Your perspective matters! Join other professionals in the State of Designer-Developer Collaboration 2025: Workflows, Trends and AI survey to share how AI and new workflows are impacting collaboration, and be among the first to see the key findings.
    Start the 2025 Survey
    Tags
    Grid
    Asked by
    Aaron
    Top achievements
    Rank 1
    Answers by
    Martin Bechev
    Telerik team
    Share this question
    or