Window Resize Maintaining Aspect Ratio

1 Answer 43 Views
Window
Josh
Top achievements
Rank 1
Josh asked on 05 Jun 2024, 04:35 PM

I am in the process of trying to convert an older Kendo UI for jQuery app to Kendo React and a feature that we had was being able to maintain a window components aspect ratio. 

We were doing this by using the resizing direction along with the before/after to adjust the height/width accordingly while resizing.

Looking at KendoReact, it seems to be using WindowMoveEvent which does not have this, and I don't see it available in the nativeEvent either.

Does anyone know if this might be accessible anywhere that I may be overlooking, or have any input on how I can get the resize direction?

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 07 Jun 2024, 07:38 AM

Hi Josh,

Although there is no direction information within the WindowMoveEvent, you can compare the previous position/size of the Window set to the component with the new position/size from the WindowMoveEvent to determine which values should be modified with the ratio and which should remain the same. It should be a matter of a few IF statements to determine the direction. 

For example, if within the onResize event the old left value is bigger than the new left value, this will indicate that the left/top values from the event should be used and the width from the event should also be kept. The only modification would be for the height. If the new and old left values are the same, but the width is changed, this will indicate that the direction is right and the height must be re-calculated from the event values. There will be few corner cases for a diagonal resize as well.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Tags
Window
Asked by
Josh
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or