Declined
Last Updated: 26 Aug 2021 10:44 by ADMIN
Grant
Created on: 23 Aug 2021 07:42
Category: KendoReact
Type: Bug Report
0
Grid Columns are not styling correctly when rendered on condition

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

1 comment
ADMIN
Stefan
Posted on: 23 Aug 2021 13:35

Hello, Grant,

Thank you for the report.

I inspected the case and noticed that the width of the colGroup element is not updated correctly in these cases:

I have also duplicated this to GitHub and added some Telerik points to your account for bringing this to our attention.

Currently, there is no workaround available, if one is found it will be added to the issue.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.