Frozen Column : Row alignment issue

[AGB]

Hi Guys,

Kendo UI Professional 2017.1.330

I have just tripped over a little issue whereby the rows of  a frozen column get out of alignment with the rest of the grid.

The scenario is as follows :-

I have an angularjs page hosting a grid with a single frozen column which contains a couple of buttons for maintenance.
Clicking the buttons calls a UI Bootstrap Modal for the user to enter some data and to acknowledge the action.

Everything works fine when clicking on a button on a row which is fully in view.

However on clicking a button on a row which is only partially in view (See last row of Image1) the modal is opened as expected but when it is closed the frozen column is scrolled slightly to fetch the button fully into view but the other grid columns are not touched.

This results in the rows of frozen column being offset with the rest of the grid (See Image2).

I have tried playing around with the various methods of the grid (.current() .table.focus() etc) pre/post opening the modal, to try and force a re-alignment all to no avail.

Therefore I would be most grateful for any advice to try and overcome this issue.

Thanks
Alan

[AGB]

Hi Guys,

I have been kicking this around a little more and I think the problem is related to using a template for the frozen column data.

To illustrate further I have managed to create the following dojo which shows rendering issues that may be the root cause of the problems outlined in my original post.

       http://dojo.telerik.com/UhoWun

If you run the above you should see that the buttons are not rendered in the last two rows.

However if you now resize the browser all rows get repainted correctly.

Regards
Alan

[Dimo]

Hi Alan,

A Grid with frozen columns requires a height.

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#locked-columns

The missing height is the cause of the clipped frozen column in the provided Dojo. Here is a modified one that works better:

http://dojo.telerik.com/ABeJE

Can you modify the above example to showcase the other misalignment problem and send it back for inspection? Thank you in advance.

Regards,
Dimo
Telerik by Progress

[AGB]

>> A Grid with frozen columns requires a height.

Which is fine when you know the grid height at design time ... but what about when you want to dynamically calculate and set the height at run time to fill a region.

How would you suggest this be achieved to get the frozen column to be drawn correctly?

As for the original problem I have been unable to replicate things exactly but I have managed to create a dojo for something very similar.

If you run the following

    http://dojo.telerik.com/ijExu

and hit the pencil icon this will simulate the updating of the FirstName data.

As you can see the cell data is dynamically updated and the row height is recalculated, but the frozen column row height remains fixed at its original value.

Once again, resizing the browser causes the frozen column row heights to be redrawn correctly.

Regards
Alan

[Dimo]

Hi Alan,

It is possible to set or change the height of the Grid's wrapper <div> at any time. You need to call the widget's resize() method afterwards:

http://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages#individual-widget-resizing

With regard to the observed misalignment in the newly provided Dojo, I can make two comments:

1. Generally, the correct way to set a dataItem value is via the setter method:

dataItem.set("FirstName", 'One<br>Two<br>Three');

2. The misalignment occurs, because the Angular template is evaluated after the Grid has rendered the column template and adjusted its layout after the value change and rebind. Possible ways to proceed are:

a) use Kendo UI template bindings instead of Angular bindings. Kendo UI template bindings are evaluated earlier, before the layout adjustment

//template: '<span ng-bind-html="dataItem.FirstName"></span>',
template: '<span>#= FirstName #</span>',

b) use Angular bindings, but call the Grid's resize() method manually in dataBound, inside a setTimeout block. You will also need to set the force parameter of the resize() method to true, because the Grid dimensions have not changed.

dataBound: function(e) {
  setTimeout(function(){
    e.sender.resize(true);
  });
},

Regards,
Dimo
Telerik by Progress

[AGB]

Hi Dimo,

Thanks for your comments & suggestions, which have allowed my to overcome all but the original problem which I'm still trying to replicate within a dojo.

My latest endeavour has now highlighted another problem related to data row heights.

If you run the following under the latest versions of IE, Edge or Firefox

    http://dojo.telerik.com/EBEZA
    
and slowly scroll down the grid you should see the frozen column lags behind the scrolling of the main data rows and by the time you get to the bottom the rows are out of alignment.

NOTE: Under the latest version of Chrome scrolling and alignment remain in sync.

Regards
Alan

[Dimo]

Hi Alan,

I looked into the provided test page and it seems that the misalignment issue is caused by the browser, and more specifically, the FontAwesome icons, which cause the table rows to become higher than specified.

There is no straight-forward way to fix this out-of-the-box, as the scrolling positions and table row heights of the locked and non-locked areas are already measured and syncronized, but you can wrap the buttons in the template column in a container with some small padding to workaround the problem.

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

Regards,
Dimo
Telerik by Progress

[AGB]

Hi Dimo,

Thank you for your investigations and the style padding workaround to stop the alignment issue when scrolling to the bottom of the list.

However the scrolling lag between the locked and non-locked columns, especially under Edge, is going to be a bit of a showstopper here as our users will see this as a bug in our software.

I have noticed that scrolling the locked column using the mouse wheel does not show any lag between the locked and non-locked columns so the internal code must be doing something different under this scenario to keep things in sync.

Therefore I would be most grateful if you could kick this around further with the development team to see if a solution can be found, otherwise I will have to start looking at other suppliers for a replacement grid control.

Regards
Alan

[Dimo]

Hi Alan,

I am afraid I cannot reproduce a lagging issue when scrolling a Grid with frozen columns. Here is how I tested with http://dojo.telerik.com/EBEZA/2 in IE11:

https://www.screencast.com/t/ucqakaIy

Generally, scroll position syncronization relies on a scroll event handler, and the scroll offset of the frozen area is set to be the same as the scroll offset of the non-frozen area. It doesn't matter if you are scrolling with the mouse wheel or by dragging the scrollbar - the event and the handler are the same. This mechanism is pretty straight-forward and as simple as it can get. A lag is theoretically possible, if the computer/browser is short on hardware power, or if the browser fires the scroll events with a delay.

Let me know if I am missing something.

Regards,
Dimo
Telerik by Progress

[AGB]

Hi Dimo,

I afraid to say once you notice it you can also see the lag in your screen cast.

It is even worst running in Edge under Windows 10.

Download and unpack the following mp4 files to see my experience:

Test1 – Scrolling over the frozen column

    No lag seen between frozen and non-frozen columns

Test2 – Scrolling over the non-frozen columns

    The scrolling of the frozen column lags behind the non-frozen columns by two-three pixels with the rows only syncing up once the scrolling has stopped.

Test3 – Dragging the scrollbar thumb

    Scrolling lag again

Test4 – Clicking the Up/Down arrows of the scroll bar

    Even more noticeable lag

NOTE: The above tests were run on a machine with an i7 processor and 16GB of ram, on a clean boot of Windows 10 with only Edge running so I don’t think this is related to machine specification.

Regards
Alan

[Dimo]

Hi Alan,

Thanks for the provided videos.

Indeed, I was able to observe the scrolling lag and I understand your concern. However, the same issue is exhibited outside Kendo UI context as well. Here is a test page with two plain <div>s and <table>s that have a synchronized vertical scroll offset and no other scripts running.

http://dojo.telerik.com/ilaSa

https://www.screencast.com/t/CoyJjldpxn0

Regards,
Dimo
Telerik by Progress

[AGB]

Hi Dimo,

Thanks for the further investigation and the stripped back dojo illustrating that the problems even exist when Kendo UI elements are not involved.

Which leaves us with the conclusion that Chrome & Firefox are better at handling scrolling regions then Edge or IE and it is a Microsoft feature and not a bug.

Thanks once again for all you help
Alan

[Hector]

I am using:

     .Scrollable(s => s.Enabled(true).Height("auto"))

to have horizontal scroll only with the first column locked. To FIX the issue I call the function DataBound() on the grid and resize the locked content as follows:

var height = $('#RunStationMethodRelationGrid').find('.k-grid-content-locked').find('table').height();
        $('#RunStationMethodRelationGrid').find('.k-grid-content-locked').css("height", height);

 

[Hector]

You can fix the issue by resizing the locked content after the data has been bound to the grid:

function myGrid_DataBound(e) {
    var lockedHeight = $('#myGridID').find('.k-grid-content-locked').find('table').height();
    $('#myGridID').find('.k-grid-content-locked').css("height", lockedHeight);

}

For whatever reason the the div with the k-grid-content-locked height is smaller than the height of its inner table content so just have to resize it.