Using jQuery to horizontally scroll content in GridView?

Question

I am working on a web application in C#/.NET and my objective is to find a way using jQuery to horizontally scroll the content within an ASP.NET gridview control (without the use of scrollbars or paging). My gridview basically contains many columns with hundreds of rows of data, so I would like to provide users with a way to easily horizontally scroll the content to view more columns regardless of how far down they have scrolled on the page.

This seemingly simple task has been a nightmare for me for the past few days, as I have scoured all throughout the web but have found nothing similar. I have tried various solutions, namely these ones:

http://www.smoothdivscroll.com/#quickdemo

http://www.gmarwaha.com/jquery/jcarousellite/?#demo

I was able to replicate the code on these sites and easily get these set up to scroll a collection of images in the same manner as the demos do. For example in the first link all I had to do was include the .js files and then add this to my markup:

$(document).ready(function() {
    $("#makeMeScrollable").smoothDivScroll({ 
        mousewheelScrolling: true
    });
});

Then I just had to add the < img > tags inside the < div id="makeMeScrollable" > and everything works perfectly. However if I take out the images in place of a < asp:GridView >, my gridview will still appear however scrolling will not work.

Any guidance on this issue would be GREATLY appreciate! Thank you!

Answer 1

The library you are using works only with img tags ie it will only display images. Thus, the smoothdivscroll javascript library is not suitable for scrolling an html element that is not img.

Visit

Visit, and check the nice demos especially the Carousel

Direct link to Carousel demo is here

Have your Gridview wrapped in the li tags.

This should work.