Horizontal scrollbar is not working

[Sourav]

Horizontal scrollbar is not working as I have more column than the width.

[Dimo]

Hello Sourav,

Yes, this behavior will be available in the official release of Kendo UI in mid November. In the meantime, you can implement it manually by subscribing to the scroll event of the Grid data area (div.k-grid-content) and scroll the header area (div.k-grid-header-wrap) by the same amount. Alternatively, add the following code in the Grid source:

_scrollable: function() {
    var that = this,
        header,
        table,
        options = that.options,
        height = that.wrapper.innerHeight(),
        scrollable = options.scrollable,
        scrollbar = kendo.support.scrollbar();

        // some removed code here

        that.content.height(height);

        // horizontal scrolling :

        var scrollables = header.find(">.k-grid-header-wrap");

        that.content.bind('scroll', function () {
            scrollables.scrollLeft(this.scrollLeft);
        });
    }
}

Best wishes,
Dimo
the Telerik team

[Sourav]

I have append the above source code in the kendo.grid.js .If I remove some portion of the code and implement it then the scrollbar is appearing but the header background portion is empty .

I have implement in the following way:

_scrollable: function() {

            var that = this,

                header,

                table,

                options = that.options,

                height = that.wrapper.innerHeight(),

                scrollable = options.scrollable,

                scrollbar = kendo.support.scrollbar();

  

            if (scrollable) {

                header = that.wrapper.children().filter(".t-grid-header");

                 

               /*

                     remove this portion

               */

                 

                that.content.height(height);

  

                // horizontal scrolling :

  

                var scrollables = header.find(">.k-grid-header-wrap");

                that.content.bind('scroll', function () {

                    scrollables.scrollLeft(this.scrollLeft);

                });

            }

        },

So , it is look different. Is this the right way what I have done?

[Dimo]

Hello Sourav,

Try using the attached JS file.

Regards,
Dimo
the Telerik team

[Devin]

Hi not trying to sound too stupid, I'm very new to programming as a whole..

Q: Has this update been merged with the current release, if so how do we call the horizontal scrolling? 

[Dimo]

Hi Devin,

Yes, the update is now part of the official source.

In order to have horizontal scrolling, you need to set widths to all columns and ensure that their sum is greater than the Grid width.

Greetings,
Dimo
the Telerik team