Grid column min width with Angular

[Ilya]

I'm trying to implement the min-width functionality for grid columns in an Angular project. Ideally, it should visually stop the resize when the minWidth limit is reached, but I would also settle for "snapping back" after the user releases the handle.

I found two possible solutions here on the forum: either modify the DOM directly (which is a decidedly "anti-Angular" solution), or update the columns via setOptions (which causes a complete redraw for the grid). The setOptions solution is a definite no, whereas DOM modification seems hacky at best.

What would be a recommended way to achieve this? Is such an option scheduled for near-future releases?

Thank you.

[Ilya]

It seems I found the culprit, now the question is whether it's a bug or a feature :)

The min-width solution that binds to .resizable events and modifies the widths directly on the DOM works only when the dataSource is local. The moment you switch it to remote data, minWidth stops functioning.

I've created a snippet on Dojo here (my first time, sorry if this is wrong)

[Atanas Korchev]

Hi,

This dojo doesn't work because of a JS error that resizable is undefined. This occurs because it isn't initialised until the grid is bound (indeed the code library works only for local bound grids).

To make it work you should handle the dataBound event of the grid and execute the code there: http://dojo.telerik.com/@korchev/iyavO

Regards,
Atanas Korchev
Telerik

 

 

[Ilya]

Atanas,

Thanks for the response. It worked in a jQuery-based solution; however, I still can't get it to work in an Angular project. I attached a custom handler to dataBound event in the grid options, but the problem persists.

On a side note, what's really strange is that the handler actually works - I mean, when I debug (or output things to console), all the rgith points in code are reached, and the code executes when the column width falls below the threshold - but it does absolutely nothing to the grid.

[Atanas Korchev]

Hello Ilya,

Here is an example which works with angular: http://dojo.telerik.com/@korchev/iyavO

Regards,
Atanas Korchev
Telerik