Hi Team,
I have found an issue in the Grid Component that I think needs some attention, see below.,
## Current behavior
My GridColumns are not styling correctly when i hide/show them based on an edit state (for example). Some that have no width restrictions will the shortened then not lengthed.
## Current Version
KendoReact 4.8.0
## Expected behavior
If I hide/show a GridColumn, its width should not affect other GridColumns, only the Grid overall.
## Minimal reproduction of the problem with instructions
Example: https://stackblitz.com/edit/react-ngpvuj?file=app%2Fmain.jsx
Instructions:
1. View how age is the only column visible with a width attr
2. Click "Switch Mode" and notice how 'Id' is not added, but a width of 80 is now applied to the 'lastname' column, the same width as age
3. Click "Switch Mode" back to view, and see how id is removed and a width of 60 is applied to the 'firstname' column.
## Investigation:
Some investigation in the DOPM revealed that the issue is centred around the <colgroup> of the Grid's <table>:
- step 2 does the following to the <col>s in the <colgroup>
- add a new col to the beginning with a width, for the Id column
- add a new col to the end with a width, for the Age column
- DOES NOT clear the width of the col group that used to be the age column
- step 3
- Simply removes the last <col> in the group. Does not affect hte attributes of the remaining <col>s
I hope this was informative and can be resolved soon.
Kind Regards,
Grant