ASP.Net GridView scroll horizontal without using scroll bars

Hi suryadevara66,

Inorder to scroll using mouse you need to make use of mousemove event handler.

Inside the mousemove event handler, you need to set the scrollLeft property.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

The following HTML Markup consists of a Div.

The Div has been set with overflow: hidden to apply scrollbar.

The Div consists of a GridView to which the AllowPaging property is set to True and OnPageIndexChanging event handler is assigned.

<div id="dvContents" style="border: 1px solid #ccc; width: 500px; overflow: hidden;">
    <asp:GridView ID="gvCustomers" runat="server" AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging">
    </asp:GridView>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var down = false;
        var scrollLeft = 0;
        var x = 0;
        // Adding mousedown event.
        $('#dvContents').mousedown(function (e) {
            // mousedown is set to True.
            down = true;
            // scrollLeft is set.
            scrollLeft = this.scrollLeft;
            x = e.clientX;
        }).mouseup(function () { // Adding mouseup event.
            // mousedown is set to False.
            down = false;
        }).mousemove(function (e) {
            if (down) {
                // scrollLeft is calculated.
                this.scrollLeft = scrollLeft + x - e.clientX;
            }
        }).mouseleave(function () { // Adding mouseleave event.
            // mousedown is set to False.
            down = false;
        });
    });
</script>

Namespaces

You need to inherit the following namespaces.

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Code

The GridView has been populated with data from Customers table of Northwind Database.

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGridView();
    }
}

private void BindGridView()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT * FROM Customers;";
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter(query, con))
        {
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                gvCustomers.DataSource = dt;
                gvCustomers.DataBind();
            }
        }
    }
}

protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
    gvCustomers.PageIndex = e.NewPageIndex;
    this.BindGridView();
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindGridView()
    End If
End Sub

Private Sub BindGridView()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT * FROM Customers;"
    Using con As SqlConnection = New SqlConnection(constr)
        Using sda As SqlDataAdapter = New SqlDataAdapter(query, con)
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                gvCustomers.DataSource = dt
                gvCustomers.DataBind()
            End Using
        End Using
    End Using
End Sub

Protected Sub OnPageIndexChanging(sender As Object, e As GridViewPageEventArgs)
    gvCustomers.PageIndex = e.NewPageIndex
    Me.BindGridView()
End Sub

Screenshot