I need to offer the user a "Reset Grid" Button that they can use to reset the grids column widths back to their original values where all columns neatly fit in the viewable area.
I'm doing this in React and Redux based app and we have one column that doesn't have a width, call it the flex column, as we want the grid columns to sick to the edges of the grid and have the flex column adjust in size so all the columns fit perfectly. This works great on initial load. However if the user adjust columns so the width is wider than the grids viewable area and the grid shows a horizontal scroll bar then when the user clicks "Reset Grid" and we give the grid the original column configuration (same one we gave it originally which worked at that time with the flex column not having a width) the grid is fit to the width of the horizontal scrollable area and not of the viewable area meaning we still have horizontal scroll bars and the columns aren't all in view.
How do we accomplish reset like in the older grid and shown here: https://plnkr.co/edit/htk7JcHcWn4Vq8ok4T8l?p=preview
3 Answers, 1 is accepted
Thank you for the details.
Based on the described case I can suggest when resetting the columns in their original state, to set the width of the Grid to the original as well.
Let say the Grid width originally is 500px, then when resetting the columns, set the Grid width to 500px again.
Please give the approach a try and advise if there are any issues with it.
Regards,
Stefan
Progress Telerik
Rank 1
If the width of the Grid is dynamic it can be retried on the componentDidMount event:
componentDidMount(){ let gridWidth = document.getElementsByClassName('k-grid')[0].offsetWidth this.setState({ gridWidth:gridWidth }) console.log(gridWidth)}https://stackblitz.com/edit/react-unrmfm?file=app/main.js
I hope this approach will allow getting the Grid width dynamically and achieve the desired end result.
Regards,
Stefan
Progress Telerik