Scrollable GridView Data With Fixed Header Using Jquery
Hi Guys, in this tutorial i will let you know how to: Scrollable GridView Data With Fixed Header Using Jquery.For this feature we have use Jquery and a bit of Javascript too.This will make Gridview Data scrollable while the header has been freezed on top.This Will help us while looking at large amount of data, and want to know that which column relate to which heading.
Design View:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Fixed Header GridView With Scrollable Data</title>
<script src="JS/jquery-1.7.2.min.js"></script>
<script src="JS/ScrollableGrid.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=gv.ClientID %>').Scrollable();
}
)
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="user_id"
Width="500px" AllowPaging="True" PageSize="20" BackColor="White"
BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="2px" CellPadding="5" >
<RowStyle ForeColor="#000066" />
<Columns>
<asp:BoundField DataField="user_id" HeaderText="User ID" ReadOnly="True" SortExpression="user_id" ItemStyle-Width="100px">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="user_Email_id" HeaderText="EMail" SortExpression="user_Email_id" ItemStyle-Width="400px">
<ItemStyle Width="400px"></ItemStyle>
</asp:BoundField>
</Columns>
<FooterStyle BackColor="Black" ForeColor="White" />
<PagerStyle BackColor="Black" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:conn %>"
SelectCommand="SELECT [user_id], [user_email_id] FROM [register_main_master]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
One reply on “Scrollable GridView Data With Fixed Header Using Jquery”
this internet site is my intake , rattling wonderful design and style and perfect subject material .