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
