In this example im going to describe how to create fixed header scrollable gridview using jquery.
I have used northwind database to populate gridview and jquery fixed header plugin.
First of all add jquery library and fixed header scrollable gridview jquery plugin in project and add reference to it between <head></head> section of HTML source of aspx page.
<head runat="server"> <title>jQuery Fixed Header Scrollable GridView</title> <script src="jquery-1.4.1.min.js" type="text/javascript"> </script> <script src="ScrollableGrid.js" type="text/javascript"> </script> </head>
Now add this jquery function call between <head></head> section
<script type="text/javascript" language="javascript"> $(document).ready(function() { $('#<%=fixedHeaderScrollableGridView.ClientID %>').Scrollable(); } ) </script>
Add gridview on aspx page and populate it.
<asp:GridView ID="fixedHeaderScrollableGridView" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="ProductID" AllowPaging="True" PageSize="30"> <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> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [CategoryName] FROM [Alphabetical list of products]"> </asp:SqlDataSource>
Build and Run the application.
Have fun
No comments:
Post a Comment