Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 19 Feb 2019 12:19 by ADMIN
Joe
Created on: 04 Jan 2019 21:49
Category: KendoReact
Type: Bug Report
0
Adding columns to react-grid that had no columns is broken

If you create a react grid without any GridColumn components and then add those components later, the added columns do not show and the grid is empty.  It appears, after a quick look that the columns have a width of 0 pixels.  They exist in the html, just not displayed.

 

See https://codesandbox.io/s/mmr894nllp as an example of the problem.  This example starts with a populated grid.  You can add columns and data using the buttons above the grid.  This works fine.  If you then "Reset" the grid with the button, which removes all data, any attempt to add columns and data will show a blank grid.

 

Thanks,

Joe

1 comment
ADMIN
Stefan
Posted on: 07 Jan 2019 10:45
Hello, Joe,

Thank you for the example.

This occurs because the table width is based on the combined column widths. In this case, when we remove the columns, the table width is set to 0, but when we add a new column, they do not have a fixed width, which leaves the table with width 0.

There are a couple of solutions which can be used:

1) Set a fixed width to all columns.

2) If there are no columns, return an empty column. This column will expand to 100% width and will keep the table from shrinking:

<Grid style={{ height: "400px", width: "400px" }} data={this.state.data} resizable={true}>
  {this.state.columns.length > 0 ? this.state.columns.map(c => (
    <GridColumn key={c.field} field={c.field} title={c.title} />
  )) : <GridColumn />}
</Grid>

https://codesandbox.io/s/molqwpnw99

3) Set the table width with CSS and important:

.k-grid table {
  width: 100% !important
}

https://codesandbox.io/s/wk78xyp0k5

I hope one of these options will prove helpful.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Create an account Log In
View
Type
Status
Category