Description:
In this article, I will explain how to implement
scrollable gridview with fixed header using Jquery.
As we know, gridview is one of the powerful
data bound controls in visual studio. Sometimes while scrolling the gridview
with large amount of data, gridview header will hide.
In this situation, it will very difficult to
identify the header for the gridview records.
To overcome this, even we scroll gridview
records, headers will remain at the top and it will visible always.
1. Download ScrollableGridPlugin Plugin
You can download from http://www.getcodesamples.com/src/DF21ADA9/D085505B
2. Include the file ScrollableGridPlugin.js
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script src="ScrollableGridPlugin.js" type="text/javascript"></script>
3. Once the document is ready, initialize the
Scrollable widget to the Gridview.
$(document).ready(function () {
$('#GridView1').Scrollable();
});
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script
src="ScrollableGridPlugin.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function () {
$('#GridView1').Scrollable({
ScrollHeight: 200,
Width: 300
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Age" ItemStyle-CssClass="CAge" HeaderText="Age" ItemStyle-Width="80" />
<asp:BoundField DataField="Sex" ItemStyle-CssClass="CSex" HeaderText="Sex" ItemStyle-Width="80" />
<asp:BoundField DataField="Email" ItemStyle-CssClass="CEmail" HeaderText="Email"
ItemStyle-Width="140" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Scrollable gridview with fixed header using Jquery ,
Scrollable gridview using Jquery , Implement Scrollable gridview using Jquery,
How to make gridview Scrollable with fixed Header, Jquery
Scrollable gridview plugin.
0 comments:
Post a Comment