Horizontal Scrollbar Not Working Properly

[Max]

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.

[Viktor Tachev]

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. 

• http://dojo.telerik.com/EjIyU/2

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


Regards,
Viktor Tachev
Progress Telerik

[Max]

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.

[Viktor Tachev]

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