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.
HTH!
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.
HTH!