Kendo React Grid appearing behind Window component

1 Answer 250 Views
Dialog General Discussions Grid Popup Styling Styling / Themes Window
Terry
Top achievements
Rank 2
Iron
Terry asked on 14 May 2021, 08:31 PM | edited on 16 May 2021, 05:46 PM

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!

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 17 May 2021, 05:10 AM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Tags
Dialog General Discussions Grid Popup Styling Styling / Themes Window
Asked by
Terry
Top achievements
Rank 2
Iron
Answers by
Stefan
Telerik team
Share this question
or