In this article I will explain how to implement scrollable gridview with fixed header in asp.net using JQuery.
To implement Scrollable gridview with fixed header I tried to implement concept with css and JavaScript but there is no luck because maintaining fixed header working in IE but not in Mozilla and vice versa to solve this browser compatibility problem I used JQuery plugin which was implemented by Mudassar Khan to maintain fixed header for scrollable gridview and I tested it in all the browsers it’s working fine without any problem.
After completion table creation design aspx page like this
To implement Scrollable gridview with fixed header I tried to implement concept with css and JavaScript but there is no luck because maintaining fixed header working in IE but not in Mozilla and vice versa to solve this browser compatibility problem I used JQuery plugin which was implemented by Mudassar Khan to maintain fixed header for scrollable gridview and I tested it in all the browsers it’s working fine without any problem.
First design the table in database and give name UserInfomation
ColumnName
|
DataType
|
UserId
|
Int(set identity property=true)
|
UserName
|
varchar(50)
|
LastName
|
varchar(50)
|
Location
|
varchar(50)
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>
<title>Scrollable Gridview with Fixed Header</title>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#<%=gvdetails.ClientID %>').Scrollable({
ScrollHeight:300, Width : 467
});
});
ScrollHeight:300, Width : 467
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView runat="server" ID="gvdetails" DataSourceID="dsdetails" AutoGenerateColumns="false">
<RowStyle BackColor="#EFF3FB" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="UserId" HeaderText="UserId" />
<asp:BoundField DataField="UserName" HeaderText="UserName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Location" HeaderText="Location" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="dsdetails" runat="server" ConnectionString="<%$ConnectionStrings:dbconnection %>"
SelectCommand="select * from UserInformation"/>
</form>
</body>
</html>
If you observe above code I added jquery-1.4.1.min.js and ScrollableGridPlugin.js
script files in header section of code you need to download the
attached code to get these script files. By using these files we can
manage the gridview header in fixed position or you can get it from here
FreezeGridviewHeaderusingjQuery
Here
don’t forgot to set the connection string in web.config file here I am
getting database connection from web.config file for that reason you
need to set the connectionstring in web.config file like this
<connectionStrings>
<add name="dbconnection" connectionString="Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"/>
</connectionStrings>
No comments:
Post a Comment