Kendo React Grid appearing behind Window component

[Terry]

I am using a Kendo React Grid inside a Kendo React Dialog Window component.

When the Window first displays the user inputs a value in a text input and clicks a button to load the grid. The Grid seems to appear behind the Window. I tried adding the: 

.k-animation-container {
  z-index: 10003;
}

to my App.css file. This doesn't help. Do I need to put the style in the Window component code, or is this different from the animation-container issue/problem?

 

Some additional information:

When I open the Dialog Window I see this:

If I type an order number and click "View" I see this:

Part of the top of the grid where the headers should be and the scroll bar appear. That tells me the data loaded and the React state variable updated and caused the grid to redraw.

If I click the minimize icon in the window header and then the click restore icon I see the data:

I can share the code if it helps.

Thanks!

[Stefan]

Hello, Terry,

Based on the provided information it seems that something is stopping the updates.

To test if this is the case try the following:

1) Add an extra random state value that will be shown in the Window when the VIew button is clicked. If the value is not updated, then something is stopping the updates.

2) Another test will be to render the same Grid outside of the Window to see if clicking View will populate it with value then.

3) Inside the Grid component, just before render console.log the data state value to see when it is updated.

If none of these leads to helpful information, please share an example reproducing the issue and I will be happy to investigate further.

Regards,
Stefan
Progress Telerik