This is a migrated thread and some comments may be shown as answers.

kendo grid(angular) - set auto fix to column for row's

0 Answers 41 Views
Grid
This is a migrated thread and some comments may be shown as answers.
archana
Top achievements
Rank 1
archana asked on 06 Apr 2021, 06:51 AM

Hi, 
I have implemented kendo grid using angular. In the same I have virtual scrolling implemented. I want auto fix columns width as per row data. i.e. if any column have data like "testing data for width- should be in one row." it should place in one row. right now it is showing the data into the two lines. for auto fix width - I have added following code
on html page

<kendo-grid #dataTable [data]="query | async" (dataStateChange)="dataStateChange($event)" [resizable]="true" [autoSize]="true">
  </kendo-grid>

on component.ts 

 

export class ListComponent extends AppComponentBase implements OnInit, AfterViewInit {

@ViewChild(GridComponent) public grid: GridComponent | undefined;

 

 public constructor( private ngZone: NgZone ) {
        super(injector);
    }

 

    public ngAfterViewInit(): void {
        this.fitColumns();
    }

public dataStateChange(state: State): void {
        this.fitColumns();
    }

   private fitColumns(): void {
        this.ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
            this.grid.autoFitColumns();
        });
    }

}

above code set width as per column's name. I required autofix column width on both column name as well as on row data. 

Thanks.

No answers yet. Maybe you can help?

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