Hi jerryhien,
I have created a sample which full fill your requirement and the required js,css need to be downloaded from below link
https://github.com/twlikol/GridViewScroll
Refer below sample
HTML
<div>
<asp:GridView ID="gvCustomers" runat="server" Style="width: 100%; border-collapse: collapse;">
</asp:GridView>
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="GridviewScroll/gridviewScroll.css" rel="stylesheet" type="text/css" />
<script src="GridviewScroll/gridviewScroll.js" type="text/javascript"></script>
<script src="GridviewScroll/gridviewScroll.min.js" type="text/javascript"></script>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#gvCustomers').gridviewScroll({
width: 600,
height: 300,
freezesize: 2, // Freeze Number of Columns.
headerrowcount: 1, //Freeze Number of Rows with Header.
arrowsize: 30,
varrowtopimg: "Images/arrowvt.png",
varrowbottomimg: "Images/arrowvb.png",
harrowleftimg: "Images/arrowhl.png",
harrowrightimg: "Images/arrowhr.png"
});
});
</script>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT TOP 50 * FROM Orders;";
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
gvCustomers.DataSource = dt;
gvCustomers.DataBind();
}
}
}
}
}
}
ScreenShot