New to Kendo UI for jQuery? Download free 30-day trial

The Horizontal Scrollbar of the Grid Moves Slowly


Product Version 2018.1 117
Product Progress® Kendo UI® Grid for jQuery


The horizontal scrollbar in the Grid does not behave correctly. When I click on the empty space in the scrollbar, it moves only little by little.


By default, the Grid uses two event handlers to synchronize its horizontal scrolling—one for the Grid data area and the other one for the headers. This approach is implemented 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.


To change the default behavior:

  1. Detach the scroll handler for the Grid header.


  2. If the page contains multiple Grid components, iterate through them when the page is loaded and detach the header scroll handler for each one.


    $.each($(".k-grid"), function (index, value) {

The following example demonstrates the implementation of the suggested approach.

<div id="grid" style="width: 600px;"></div>
    $(document).ready(function () {
            dataSource: {
                type: "odata",
                transport: {
                    read: ""
                pageSize: 20
            height: 550,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title",
                width: 400
            }, {
                field: "CompanyName",
                title: "Company Name",
                width: 500
            }, {
                field: "Country",
                width: 150

In this article