Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 23 Oct 2020 09:37 by ADMIN
David
Created on: 23 Oct 2020 02:09
Type: Bug Report
0
React Grid Component does not render properly on hidden react-bootstrap Tab
"@progress/kendo-react-grid": "^3.15.0"
  1. Configure a Kendo React Grid with paging on a react-bootstrap tab that is hidden on initial load
  2. Navigate to the tab - the Grid is rendered with truncated paging controls and no item count
  3. Resize the screen in any way - the full paging controls and item count are restored

Is there a workaround for this issue?

Attached Files:
2 comments
David
Posted on: 23 Oct 2020 09:23
Thanks Stefan, this can easily be resolved using the react-bootstrap tab mountOnEnter property.
ADMIN
Stefan
Posted on: 23 Oct 2020 07:20

Hello, David,

Thank you for the details.

This is expected as the Grid is sized based on its container and initially this container has no width.

A possible workaround can be to force the component to re-render with this.forceUpdate when the Grid tab is opened.

Another option is to render the Grid only when the tab is opened, something like:

{thisTabIsVisible && <Grid/>}

If you share a runnable example, I can suggest other options if available.

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/.

Create an account Log In
View
Type
Status