Frozen Column : Row alignment issue

14 posts, 0 answers
  1. AGB
    AGB avatar
    71 posts
    Member since:
    Sep 2014

    Posted 03 Apr 2017 Link to this post

    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

  2. AGB
    AGB avatar
    71 posts
    Member since:
    Sep 2014

    Posted 04 Apr 2017 in reply to AGB Link to this post

    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

  3. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 04 Apr 2017 Link to this post

    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
    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.
  4. AGB
    AGB avatar
    71 posts
    Member since:
    Sep 2014

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

    >> 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

  5. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 07 Apr 2017 Link to this post

    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
    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.
  6. AGB
    AGB avatar
    71 posts
    Member since:
    Sep 2014

    Posted 10 Apr 2017 in reply to Dimo Link to this post

    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

  7. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 11 Apr 2017 Link to this post

    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
    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.
  8. AGB
    AGB avatar
    71 posts
    Member since:
    Sep 2014

    Posted 11 Apr 2017 in reply to Dimo Link to this post

    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

  9. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 12 Apr 2017 Link to this post

    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
    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.
  10. AGB
    AGB avatar
    71 posts
    Member since:
    Sep 2014

    Posted 17 Apr 2017 in reply to Dimo Link to this post

    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

  11. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 18 Apr 2017 Link to this post

    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
    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.
  12. AGB
    AGB avatar
    71 posts
    Member since:
    Sep 2014

    Posted 20 Apr 2017 in reply to Dimo Link to this post

    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
  13. Hector
    Hector avatar
    2 posts
    Member since:
    Oct 2017

    Posted 04 Oct 2018 Link to this post

    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);

     

  14. Hector
    Hector avatar
    2 posts
    Member since:
    Oct 2017

    Posted 04 Oct 2018 in reply to Dimo Link to this post

    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.

Back to Top