Grid and Column Resize

1 Answer 485 Views
Grid
Dominic
Top achievements
Rank 1
Iron
Dominic asked on 15 Aug 2021, 03:12 PM

I have setup a listening event on the page:

const [width, height] = constants.useWindowSize();

window.addEventListener("resize", updateSize);

 

And setup the column widths to use a percentage of the window size.

width={width * 0.2}

 

When the window increases in size it works and when I decrease it back to the point of the original window size it works.  It does not seem to work when I reduce the window below the original width it does not appear to work.

 

 

Dominic
Top achievements
Rank 1
Iron
commented on 15 Aug 2021, 03:15 PM | edited

It does appear the header row updates correctly when reducing the size of the window, but the data rows do not. The header looks like it renders as a separate table than the data and the header table is behaving as expected, but the data table is not.

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 16 Aug 2021, 06:29 AM

Hello, Dominic,

I made a similar example based on the provided information and it seems to update the columns correctly:

https://stackblitz.com/edit/react-zg7pxa?file=index.html

If the issue still occurs, please update the example to replicate the issue and I will be happy to take a look.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Dominic
Top achievements
Rank 1
Iron
commented on 16 Aug 2021, 03:23 PM

The only difference I see on mine is I am using a classless component.  Does this work for you when using classless as well?

useEffect(() => {
window.addEventListener("resize", handleWindowResize); }, []);
Stefan
Telerik team
commented on 17 Aug 2021, 07:15 AM

I have made a hooks version of the same example and it is still working on my end: 

https://stackblitz.com/edit/react-zg7pxa-emdugy?file=app%2Fmain.jsx
Dominic
Top achievements
Rank 1
Iron
commented on 17 Aug 2021, 11:11 AM

Thanks, I will give it a try again later this week when I have a chance to work on it.
Tags
Grid
Asked by
Dominic
Top achievements
Rank 1
Iron
Answers by
Stefan
Telerik team
Share this question
or