Horizontal scrollbar is not working

6 posts, 0 answers
  1. Sourav
    Sourav avatar
    28 posts
    Member since:
    Sep 2011

    Posted 10 Oct 2011 Link to this post

    Horizontal scrollbar is not working as I have more column than the width.
  2. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 11 Oct 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Sourav
    Sourav avatar
    28 posts
    Member since:
    Sep 2011

    Posted 12 Oct 2011 Link to this post

    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?
  4. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 12 Oct 2011 Link to this post

    Hello Sourav,

    Try using the attached JS file.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Devin
    Devin avatar
    1 posts
    Member since:
    Jan 2012

    Posted 25 Jan 2012 Link to this post

    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? 

  6. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 25 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top