Last Updated: 23 Oct 2020 09:37 by ADMIN
Created on: 23 Oct 2020 02:09
Category: KendoReact
Type: Bug Report
React Grid Component does not render properly on hidden react-bootstrap Tab
  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?

Posted on: 23 Oct 2020 09:23
Thanks Stefan, this can easily be resolved using the react-bootstrap tab mountOnEnter property.
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.

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