Grid fitColumns() not working in v4.6.0

[Brian]

I have a grid with a large number of columns, and upon initial load I call fitColumns to resize based on the data on the current page. In v4.5.0 of the grid, this worked fine, the columns would all resize, and the grid would be horizontally scrollable.

In 4.6.0 the behavior seems to have changed, and the call does not seem to work. The grid columns all shrink to fit the width of the grid, become very skinny, and no horizontal scrolling is enabled. 

Has this been reported / is known?

Thanks!

-Brian

[Brian]

I incorrectly called it fitColumns, sorry... that was my method that calls the same autoFitColumns() method as in the example here: https://www.telerik.com/kendo-angular-ui/components/grid/columns/resizing/

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

[T. Tsonev]

Hello Brian,

Thank you for reporting this problem. This looks like a regression from a recent performance optimizations in the autoFitColumns method.

We're working on a fix right now—it should be ready by the end of this week.

I've updated your Telerik points as a small token of gratitude for your involvement.

Best Regards,
T. Tsonev
Progress Telerik

[T. Tsonev]

Hi Brian,

The fix is available in the latest development build. Let me know if it works okay for you.

Best Regards,
T. Tsonev
Progress Telerik

[Brian]

When I set my package file to "dev" I get @progress/kendo-angular-grid@4.5.0-dev.201911191710 ... is this the correct build? 4.6.1 is the latest.

For some reason, when I downgrade from 4.6 to 4.5 (or this dev build), I get a lot of compiler errors:

ERROR in ../node_modules/@progress/kendo-angular-grid/dist/es2015/editing/add-command.directive.d.ts:30:5 - error TS2416: Property 'click' in type 'AddCommandDirective' is not assignable to the same property in base type 'ButtonDirective'.
  Type '(e: any) => void' is missing the following properties from type 'EventEmitter<any>': emit, subscribe, observers, closed, and 17 more.

30     click(e: any): void;
       ~~~~~
../node_modules/@progress/kendo-angular-grid/dist/es2015/editing/add-command.directive.d.ts:30:5 - error TS2425: Class 'ButtonDirective' defines instance member property 'click', but extended class 'AddCommandDirective' defines it as instance member function.

[Brian]

(I have cleaned out node modules, re-run npm install / npm update.. lots of combinations without much luck). The new version works fine though (but still has the bug... in 4.6.1 that is). : )  

[T. Tsonev]

Hi Brian,

Can you please confirm that you've got the 4.6.2-dev build? If not, try referencing the version name directly:

npm install --save @progress/kendo-angular-grid@v4.6.2-dev.202001091520

The npm registry sometimes fails to list the latest versions, presumably due to server-side caching.

Best Regards,
T. Tsonev
Progress Telerik

[Brian]

Thanks... yes, looks like that was the case (that it wasn't identifying the correct version). Referencing it directly works & downloads the correct file.

 

That said, I am still seeing the behavior with the 4.6.2-dev build... though slightly different (it seems to act like it does in the current 4.6.1 release now)... the autoFitColumns doesn't seem to take effect on initial load until I click / focus something on the page then it "snaps" back to the correct column sizes. So it basically loads with compressed columns (incorrectly), then the columns resize as you would expect with autoFit when you click somewhere on the page... very strange. 

-Brian

[Brian]

Occasionally I will see that it will update on its own on various events (mouse over?)... but it seems inconsistent & definitely does not initially autofit correctly.

[T. Tsonev]

Hi Brian,

I've set up a copy of the resizing demo on stackblitz that uses the dev version. Can you spot any differences with your scenario—anything that would cause it to replicate the issue?

Best Regards,
T. Tsonev
Progress Telerik

[Brian]

Thanks... yes, that use case does work (and for me as well).

It looks like the difference has to with databinding. In my case, I am binding to an observable data source, so the data is not yet loaded in the after init. When the data changes via a service, I am calling fitColumns. That seems to be when it is not working. The dataStateChange event call to fitColumns works fine... so if I sort or click a column, it runs the autosize. 

I'll see if I can modify the example, but the general approach:

- subscribe to some service that emits a resultChanged with new data.

- set the gridDataView = a griddataresult with the new data & total count

- set loading indicator to false & then call fitColumns()

[T. Tsonev]

Hi Brian,

Thanks for the additional info. The described scenario seems similar to the example in custom directives.

I've updated the sample to match it, but it seems to be resizing the columns.

Are you executing the autoFitColumns method in the onStable subscriber as in the demo?

Best Regards,
T. Tsonev
Progress Telerik

[Brian]

Yes, I'm using the onStable method... I'll circle back and dig into this some more if I have time later in the day. We don't use the custom directive, but the approach is basically the same / very similar to your updated sample.

Thanks!

-Brian

[Brian]

Got it! Finally spotted the difference. ; )   So... the new build is working if you do NOT have hidden columns (I do!). 

Try setting one of the columns in your example to be hidden:  [hidden]="true"

That should reproduce the behavior i've been seeing!

-Brian

[Svet]

Hi Brian,

Thank you for the provided additional details.

Indeed, that is a bug on our side, for which I logged the following issue in our public GitHub repository:

https://github.com/telerik/kendo-angular/issues/2681

Please track the issue for updates.

I have also updated your account Telerik points for bringing this issue to our attention.

Let me know in case I can provide any further information about Kendo UI for Angular.

Regards,
Svetlin
Progress Telerik