How to get column field on columnResize grid event

[Megan]

Hello,

I'm working on adding functionality to save the grid column size settings when they resized using the columnResize event.

The issue I'm having right now is that I can't access the unique identifier I need (column field) in the ColumnResizeArgs / ColumnBase interfaces.
https://www.telerik.com/kendo-angular-ui/components/grid/api/ColumnResizeArgs/

I see that other libraries like React and jQuery are providing the column field property in their resize events - so I'm curious where the alternative is for Angular (if any).  I see the property is there while debugging the args but I can't see it exposed in the Kendo interface anywhere.

I do see the 'title' property, but this will not work in our application due to translation and other issues.

Any ideas or help would be appreciated.

Thank you!

[Zornitsa]

Hi Megan,

Indeed, by design, the columnResize event returns a ColumnResizeArgs object, which contains a column of type ColumnBase. However, since internally the ColumnComponent extends this ColumnBase class, the event emits a ColumnComponent object, which provides the field property of the currently resized column.

To better illustrate the above clarification, I am sharing below a StackBlitz example that displays the respective field of the resized column in the columnResize event:

• https://stackblitz.com/edit/angular-tbxxpx

Hence, the columnResize event actually returns the desired column field property and since the API documentation does not directly address this matter, which may cause some confusion, we will consider updating it with an additional description that explains the stated information.

I hope this clears up any confusion. Let me know if any further questions arise.

Regards,
Zornitsa
Progress Telerik

[Megan]

Thanks for your reply and providing an example!

I don't think it's good practice to use the 'any' type and should have a parameter type like this:

    public onResize(event: ColumnResizeArgs[]): void {

        console.log(event[0].column)

        this.columnField = event[0].column.field;

    }

However since the the ColumnBase interface doesn't have the 'field' property it returns an error:

Property 'field' does not exist on type 'ColumnBase'.ts(2339)

 

Since the property is already there is there anyway to update the ColumnBase interface? Or is there another type we can use other than 'any'?

[Megan]

Okay after looking at this I think the best solution I found was to add a custom type to add the field property:

type ColumnResize = {
  column: ColumnBase & { field?: string };
  newWidth?: number;
  oldWidth: number;
};

onColumnResize(args: ColumnResize[]): void {
   const targetColumnId = args[0].column.field;
 }

Let me know if there was a different solution to this.

Thanks for you help! 

[Zornitsa]

Hi Megan,

I am glad that you found a suitable approach for your scenario. It seems to me that the provided configuration is correct and I can confirm that it could be used as a solution for this matter.  

I remain at your disposal in case any further questions arise.

Regards,
Zornitsa
Progress Telerik