Horizontal Scrollbar Not Working Properly

4 posts, 0 answers
  1. Max
    Max avatar
    20 posts
    Member since:
    Mar 2010

    Posted 19 Jan 2018 Link to this post

    Apologies if this is a known issue:

    As of what appears to be Kendo UI 2017 R3 SP1, the horizontal scrollbar doesn't behave like it used to.  Using the following example:

    http://dojo.telerik.com/@mcook103/UVetI

    If I choose Kendo UI 2017 R3 from the Library dropdown, run the example, and click on the empty space to the right of the horizontal scrollbar, it moves to the far right of the grid with one click.

    If I choose any version after Kendo UI 2017 R3 (including the latest 2018 R1 version), I have to click multiple times to get the scrollbar to move just a fraction of the grid's width.

    I've tested this in IE and Opera browsers and found the same results.

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2382 posts

    Posted 23 Jan 2018 Link to this post

    Hi Max,

    By default the Grid is using two event handlers to synchronize horizontal scrolling. One is for the Grid data area and one is for the headers. This is done to address some edge cases where the data cells and the header can get misaligned. This feature may cause the horizontal scrollbar to move slower and with smaller increments. 

    In order to change the behavior you can detach the scroll handler for the Grid header. For your convenience I have updated the dojo and it works as expected on my end. 


    Give the modification a try and let me know how it works for you. 


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Max
    Max avatar
    20 posts
    Member since:
    Mar 2010

    Posted 23 Jan 2018 in reply to Viktor Tachev Link to this post

    Thanks, Viktor.  I find it unacceptable that I now have to go add a line of code to every grid in my application, just so the horizontal scrollbar works like it used to in previous versions of the Kendo UI framework (which is the standard behavior for any horizontal scrollbar.
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2382 posts

    Posted 24 Jan 2018 Link to this post

    Hello Max,

    I understand your point. However, this behavior has been implemented to avoid unwanted misalignment in the Grid component. 

    If you have multiple Grid components where you would like to apply the modification I can suggest one of the following approaches. One option is to handle the document.ready() event and iterate through the Grids on the page:

    $.each($(".k-grid"), function (index, value) {
        $(value).data("kendoGrid").wrapper.find(".k-grid-header-wrap").off("scroll.kendoGrid");
        }
    );


    Another option is to handle the Grid dataBound event and detach the scroll handler there:


    dataBound: function(e) {
        this.wrapper.find(".k-grid-header-wrap").off("scroll.kendoGrid");
    }

    Give the options a try and let me know which one works better in your scenario.


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top