How to Create Scrollable Gridview in Asp.Net Using JavaScript

Description:-

In this example we will see how to create scrollable GridView in dot net using JQuery. Here bind Gridview from SQL Server and Fixed size we will assign for Gridview for Particular area so we can set Scroll in Gridview. Let’s start how to do it.

In you webpage Design your Gridview like below and create script for scrolling. Using Data Fields we can Retrieve Column Data from SQL Server.

Download File:- ScrollableGridPlugin.js, Jquery-1.4.1.min.js

Default.aspx:-

<div>
  <asp:GridView ID="fixedHeaderScrollableGridView" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False"
  DataKeyNames="ProductID" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" 
  ForeColor="Black" GridLines="Vertical" >
  <AlternatingRowStyle BackColor="#CCCCCC" />
  <Columns>
    <asp:BoundField DataField="ProductID" HeaderText="ProductID" />
    <asp:BoundField DataField="ProductName" HeaderText="ProductName" />
    <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" />
    <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />
    <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" />
  </Columns>
  <FooterStyle BackColor="#CCCCCC" />
  <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
  <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
  <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
  <SortedAscendingCellStyle BackColor="#F1F1F1" />
  <SortedAscendingHeaderStyle BackColor="#808080" />
  <SortedDescendingCellStyle BackColor="#CAC9C9" />
  <SortedDescendingHeaderStyle BackColor="#383838" />
 </asp:GridView>
 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString=
    "<%$ ConnectionStrings:DBCS %>" SelectCommand="SELECT * FROM [Products]"> </asp:SqlDataSource>
</div> 

Script for generating Gridview

<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="ScrollableGridPlugin.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
  $('#<%=fixedHeaderScrollableGridView.ClientID %>').Scrollable({ScrollHeight: 100});
  });
</script> 

Using ScrollableGridPlugin.js and Jquery-1.4.1.min.js you can create your Own Scrollable Gridview in browser and for giving Height you can assign limited height for Gridview.

In your Webpage Bind Gridview from SQL DataSource and Get data from SQL Database. Now Generate Script for Scrolling so we can Create Scroll in Gridview. For Connection String you Can Check your Web.config file. Here I have took my connection String for taking data from my Database. You can create our own when you bind connection string using SqlDataSource.

Now run your Webpage in Browser and you will get scroll in your Gridview.

Author : Umesh Patel

Related Posts