How to detect when a user auto-fit's a grid column using double click

[Stephen McDaniel]

We are looking for a way to detect when a user causes a column to be auto-fit by double-clicking between column headers.

For some background, we are adding a feature to our app that will remember column widths when the user manually resizes columns so they have the same width when they come back to the app later.  We can use the columnResize event to be notified when a user resizes the columns to a specific width and that works well in many cases. 

However, when a user double clicks between column headers to have the column auto-fit, we haven't been able to distinguish that operation from the user manually sizing a column (at least, we haven't found a *clean* solution that works).  We want to know when the user does the auto-fit because we want to throw away the saved column width for the column so the next time the user loads the app, the column goes back to auto-fit mode instead of having a hard-coded width.

[Yanmario]

Hi Stephen,

Thank you for the provided details.

I would recommend two approaches based on the dblclick event as the Grid doesn't provide a specific event that recognizes the double-click autofit. 

The first approach is utilizing columnResize event that the developer can set a flag if it was fired and then the dblclick event can use a condition to recognize it the columns were resized. Example demonstrating the mentioned approach:

 https://stackblitz.com/edit/angular-8hglyk?file=app/app.component.ts

The second approach only relies on the dblclick event that provides the target element class, which would be "k-column-resizer" when the user double clicks on the resizer. Example demonstrating the approach:

https://stackblitz.com/edit/angular-8hglyk-twjgxl?file=app/app.component.ts

I hope this helps.

Regards,
Yanmario
Progress Telerik

[Stephen McDaniel]

Those approaches seem promising.  Right now, I'm trying to use the second approach.  I have it coded up but once I'm in the event handler, how can I figure out what column is the one affected by the double click?  It's not really enough for me to know that *some* column was auto-fit.  I want to know *which specific* column was auto fit.

[Yanmario]

Hi Stephen,

The Grid columnResize event returns the resized columnthat includes newWidth and oldWidth.

Example demonstrating the columnResize event:

https://stackblitz.com/edit/angular-6i52zj-nz6jec?file=app/app.component.ts

Regards,
Yanmario
Progress Telerik

[Stephen McDaniel]

Sorry, I may not have explained it well.  I know about the columnResize event but that event doesn't tell me if I'm dealing with an auto-fit resize.  I'm trying to find a way to know when the user manually resizes a column versus when the user auto-fits a column.  The resize event gives me a nice reference to the column but at the point when that event is raised, I don't know what kind of resize I'm dealing with.  The earlier suggested option of watching double click is nice because I can detect the auto-fit operation but at that point I don't know what column I'm dealing with and don't know a clean way to get the column from the double click event handler.

[Yanmario]

Hi Stephen,

In such a case the click event can be handled with some flags and conditions to determine if the user resized or autofitted a column. Please check the following example of such an implementation:

https://stackblitz.com/edit/angular-8hglyk-icakzd?file=app/app.component.ts

I hope the provided example steers you in the right direction.

Regards,
Yanmario
Progress Telerik