Grid columns misaligned after reload

0 Answers 21 Views
Grid
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Vedad asked on 17 Jun 2021, 12:44 PM | edited on 17 Jun 2021, 02:48 PM

Hi,

I have a strange issue with grid, and it seems it occurred after I upgraded from 2020 R2 to latest kendo ui version.

I have grids implemented on multiple places and I have 2 themes (Kendo Default and custom dark theme build through theme builder).

When I first load (or reload) page with grid with default (light) theme, it renders normally. If I switch to dark theme everything is fine, but if I load or reload the page with the dark theme, header row misaligns columns with the rest of the grid. (see images). 

I even partially debugged and it led me to function

support.scrollbar = function (refresh) {

where support._scrollbar variable is sometimes 0 and sometimes 10 (for the same grid and same data). (it looks to me that sometimes it doesn't take scrollbar into a count when calculating headers). What is also interesting if I try to resize any header column everything snaps back as it should be.

Unfortunately, there is no way I can build replica of everything in dojo, so I would appreciate even vague pointing where to look further.

Thank you very much and regards,

Vedad

Georgi Denchev
Telerik team
commented on 22 Jun 2021, 10:42 AM

Hello, Vedad,

Could you let me know how are the themes loaded when you switch between them?

Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 22 Jun 2021, 01:00 PM | edited

Hi Georgi,
I have a dropdown with 2 themes (Default and dark). By changing selection on dropdown, I just change css files names used for styling and re-render. Everything renders perfectly fine except grids. (even on grids, styling is fine, but just this misalignment) Even charts are restyled without glitches.
Thanks
Georgi Denchev
Telerik team
commented on 25 Jun 2021, 10:38 AM

Hi, Vedad,

I tried a couple of different ways to reproduce the issue but to no avail. Could you open a private support ticket and share the custom dark theme with us so I can try and debug the problem locally?

In the meantime check the JSFiddle provided by my colleague in this forum post:

https://www.telerik.com/forums/skinselector-to-choose-kendo-css-templates#2672838 

It showcases how to load different themes without refreshing the page. I am not certain if you follow the same approach, but in case you don't, give it a try.

Additionally try calling the resize method on page load and see if that makes any difference. I'll keep looking for possible causes while waiting for your reply and I'll let you know if I find something.

Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 25 Jun 2021, 04:46 PM

Hi Georgi,

thanks for the response. Basically, I do the same thing as your colleague - I am not reloading the page after theme switch, I change files too.

Problem occurs after I switch to dark theme and if I reload the page manually in browser. Also, I think I pinpointed one more clue - this happens 99% in case I have developer tools open. If they are closed, it seems to be very rare.

I will see if I can pinpoint situation when it happens with chrome tools closed.

Thanks again!
Georgi Denchev
Telerik team
commented on 30 Jun 2021, 08:46 AM

Hi, Vedad,

Thank you for the update!

Let me know if you require further assistance or if you have any questions that I could answer.

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or