column locking row heights not matching in Kendo UI for jQuery Grid

Bill

27 posts

Member since:
Jul 2012

Posted 01 Apr 2014 Link to this post

Kendo UI Grid Forum,

Kendo UI Grid just came out with the column locking functionality. When column locking is enabled, the heights of the nonlocking rows don't line up after the first 2 rows - see the attached file. The locked column height dictates the height of all of the other rows because it has the most information. Without column locking the row heights function just fine. With column locking there's a mismatch in row heights. Do you have any recommendations regarding this issue?

Thanks for your help, Netfactor

ColumnLocking Picture.png

Nikolay Rusev

Admin

2289 posts

Posted 02 Apr 2014 Link to this post

Hello Bill,

We are aware of this issue. It was addressed in the recent internal build. You can downloaded from your account. Please give it a try and let me know whether you are still seeing the same behavior.

Regards,
Nikolay Rusev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Bill

27 posts

Member since:
Jul 2012

Posted 02 Apr 2014 Link to this post

Nikolay,

We're currently using version 2014.1.318 which is the same as the current internal release and there are issues with the rows lining up.

Bill

Nikolay Rusev

Admin

2289 posts

Posted 03 Apr 2014 Link to this post

Hello Bill,

2013.1318 is the Q1 2014 official release of Kendo UI. You should download latest internal build for Kendo UI from your account.

Regards,
Nikolay Rusev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Bill

27 posts

Member since:
Jul 2012

Posted 03 Apr 2014 Link to this post

The link mentioned shows version 2014.1.318 in the dropdown for the latest build for UI for ASP.NET MVC and 2014.1.318 for Kendo UI Web. Let me know where to find later builds...

Bill

27 posts

Member since:
Jul 2012

Posted 04 Apr 2014 Link to this post

We're currently using build 2014.1.318 and running into the issue with columns not lining up - see the attached screen shot.

Is there a newer build out that resolves the problem of the rows lining up between the locked and unlocked columns?

Latest Build.png

Kiril Nikolov

Admin

2596 posts

Posted 04 Apr 2014 Link to this post

Hello Bill,

On the screenshot that you shown the build in the link is 2014.1.328 and not 2014.1.318. Did you try using the .328 version? If not please download it and give it a try.

Regards,
Kiril Nikolov
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Bill

27 posts

Member since:
Jul 2012

Posted 07 Apr 2014 Link to this post

Version 2014.1.328 resolved the issue. The rows are now lining up. Thanks for your help.

Kiril Nikolov

Admin

2596 posts

Posted 07 Apr 2014 Link to this post

Hi Bill,

I am glad to hear that the issue is resolved.

In case you have any further questions, please do not hesitate.

Regards,
Kiril Nikolov
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Oscar

185 posts

Member since:
Oct 2010

Posted 14 Apr 2014 Link to this post

Hi Nikolay,
Do you have any fiddle/jsbin sample to check if this last internal build resolved this issue?
I'm getting vertical misaligned rows in IE11. Chrome works fine.
Kind regards
Oscar.

Oscar

185 posts

Member since:
Oct 2010

Posted 15 Apr 2014 in reply to Oscar Link to this post

Hi kendo Team:
You can watch this effect in the attached picture.

kendogrid20140415.jpg

Nikolay Rusev

Admin

2289 posts

Posted 15 Apr 2014 Link to this post

Hello Oscar,

We will need a runnable example of the behavior you describe in order to assist you further.

Regards,
Nikolay Rusev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Oscar

185 posts

Member since:
Oct 2010

Posted 15 Apr 2014 in reply to Nikolay Rusev Link to this post

Hi Nikolay:
Do you have any http://cdn.kendostatic.com for build 2014.1.409?

Oscar

185 posts

Member since:
Oct 2010

Posted 15 Apr 2014 in reply to Oscar Link to this post

Hi Nikolay:
I've attached a sample that reproduces de issue.
Kind regards.

Nikolay Rusev

Admin

2289 posts

Posted 16 Apr 2014 Link to this post

Hello Oscar,

The misalignment is caused due to odd rendering bug in IE11. If you set margin of any value for the checkboxes the rows will render in sync. I'm attaching update example.

Regards,
Nikolay Rusev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

GridSelectionWithCheckboxesAndLockedColumns.zip

Oscar

185 posts

Member since:
Oct 2010

Posted 16 Apr 2014 in reply to Nikolay Rusev Link to this post

Thank you very much, Nickolay. It works like a charm.
Kind regards.
Oscar.

Ritu

8 posts

Member since:
Sep 2014

Posted 27 May 2015 Link to this post

The issue still exists try to add new record and see the result. rows are still misaligned.

Bryan

25 posts

Member since:
Jun 2012

Posted 06 Apr 2016 Link to this post

I am having the same issue using the locked column in our grid. The issue is specific to IE11.

Has this been resolved. It looks like no one responded.

Dimo

Admin

8485 posts

Posted 06 Apr 2016 Link to this post

Hi Bryan,

There are no current outstanding issues related to row height mismatch. Which Kendo UI version are you using? Do you have anything inside the Grid table cells that loads with a delay and expands the rows?

Regards,
Dimo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Bryan

25 posts

Member since:
Jun 2012

Posted 06 Apr 2016 in reply to Dimo Link to this post

Hi Dimo,

Thanks for the quick response. version is 2016.1.226. The grid is created in the document.ready.

More specifics to recreate the issue:

load the page

the first column is locked and the rest of the columns scroll

The last row locked column has text and row cutoff. All other columns show without issue.

If I resize the locked column (drag edge of header to make it larger), it resets the last row locked column to show all text and row is aligned between the locked and scrollable columns.

One other thing, this is occurring in both IE11 and Chrome latest version. I was wrong to say it was only IE11.

Bryan

25 posts

Member since:
Jun 2012

Posted 06 Apr 2016 Link to this post

Hi Dimo,

I have found out further that when I remove bootstrap.css from layout file, the issue goes away.

I wanted to let you know in case you are aware of any other bootstrap issues.

Dimo

Admin

8485 posts

Posted 08 Apr 2016 Link to this post

Hi Bryan,

Here is a test page that registers the Bootstrap CSS and appears to work as expected. Do I need to change anything for the misalignment to occur? Let me know.

http://dojo.telerik.com/Ijeku

Regards,
Dimo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Sruthi

1 posts

Member since:
Feb 2017

Posted 14 Mar 2017 in reply to Dimo Link to this post

Hello ,

We have downloaded the latest build of Kendo version V2017.1.118 .We are facing issues with the lining of the heights of the rows. The height of the locked rows and the unlocked rows does not match, on the load of the page. However, any event done on the window such as the window resize, the height of the rows get aligned properly. But on refreshing the kendo grid, the problem comes again and it persists, no matter whatever is done.

Regards,

Mihir

Kiril Nikolov

Admin

2596 posts

Posted 14 Mar 2017 Link to this post

Hi,

Can you please create a runnable sample where the issue can be reproduced and send it in a separate support request? We will be happy to help!

Regards,
Kiril Nikolov
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Scott Waye

179 posts

Member since:
Nov 2009

Posted 22 Mar 2017 Link to this post

We also have the same problem (2017.1.118), in Edge. Although we create the non fixed columns at run time to create a crosstab.

Stefan

Admin

3071 posts

Posted 24 Mar 2017 Link to this post

Hello Scott,

This is not a known issue and it was not reproduced in our testing scenario.

I made an example with locked columns using version 2017.1.118 and it is working as expected on Edge:

http://dojo.telerik.com/eZasA

If possible, please modify the provided example to reproduce the issue or send a new one, and I will gladly assist.

Regards,
Stefan
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Scott Waye

179 posts

Member since:
Nov 2009

Posted 24 Mar 2017 in reply to Stefan Link to this post

Hi, its a more complicated scenario and requires an async template

http://dojo.telerik.com/eZasA/2

Stefan

Admin

3071 posts

Posted 28 Mar 2017 Link to this post

Hello Scott,

This is expected because there is a difference in the height of the rows. When the Grid has frozen columns, there are two rendered table elements and if the rows are higher in one of the table, the second will not expand automatically.

In this scenario, I can suggest autofitting the column that may have a longer text to ensure that it will be fit on one row:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-autoFitColumn

I modify the Dojo to demonstrate this:

http://dojo.telerik.com/eZasA/3

Regards,
Stefan
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Charan

1 posts

Member since:
Feb 2021

Posted 03 Feb Link to this post

Hi Team,

When a kendo grid has both locked columns and unlocked columns, the rows are not aligning properly when I set grid auto resize property to the kendo grid. If I remove grid auto resize property and defining some height it's working good. So what can we do now to make grid align properly when we set grid auto resize property

Eyup

Admin

4081 posts

Posted 05 Feb Link to this post

Hello Charan,

This thread starts to get quite large and it is difficult to track what exactly is going on and whether the locked columns + resizing issue you mentioned is related to the problem discussed here.

In order to provide you with more efficient and to-point answer tailored for this specific case, could you open a new formal thread and send us a sample screenshot demonstrating what exactly is happening? Then, we will be able to better figure out the appearance issue and provide more accurate and precise suggestions to resolve it.

Regards,
Eyup
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/.