PROTIP: Horizontal Scrolling, The Right Way

1 posts, 0 answers
  1. Robert
    Robert avatar
    38 posts
    Member since:
    Feb 2012

    Posted 11 May 2012 Link to this post

    Recently, I was attempting to get horizontal scrolling in KendoUI Grid to work properly. According to this post, all you had to do was "set the column widths and turn scrolling on." Wow, that would be great. Unfortunately, what happened was the scrollbar rendered OUTSIDE the grid, which is not what I wanted.

    What I really wanted was for a horizontal scrollbar to be in the grid data area, and that the headers scroll in unison with the data area, without hiding the vertical scrollbar for the grid, and without scrolling the footer either. I was told that it couldn't be done, but I have the advantage of having done it before with DHTML back in the .NET 1.0 days. Besides, I don't like taking "no" for an answer.

    After doing a little bit of digging, I discovered it would be significantly easier with KendoUI than it was with my product. Turns out, it only requires 5 lines of jQuery code.

    I've created a jsFiddle to show how it works. Make sure your outer div has the overflow set to hidden, and don't follow the instinct to wire up the vertical scroll as well.

    If you have any questions about this technique, please post them here.
Back to Top