Introduction: In this
article today I will explain how to Freeze the Datalist header using Jquery in
asp.net
Description:
To
implement this functionality we use the FreezeHeader Jquery Plugin. To make it functional
in project follow the below given steps:
Step 1 : Download
the FreezeHedaer Jquery Plugin and keep it in js folder of website.
Step 2 : After
that link the js file to webform (default.aspx) before </head>tag.
HTML Markup
of Webform:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.freezeheader.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#dltable").freezeHeader({
'height': '200px'
});
})
</script>
<style>
.*{
margin:0;
padding:0;
}
body{
font-family:"Trebuchet MS", "Myriad
Pro", Arial, sans-serif;
font-size:14px;
background:#fefefe;
color:#333;
text-shadow:1px 1px 1px #fff;
overflow-x:hidden;
}
.gridView
{
width:
100%;
clear:
both;
border:
medium none !important;
border-collapse:
collapse;
}
.gridView
tr td
{
vertical-align:
top;
border-left:
1px solid #E2E6E6;
}
.gridView
thead tr, .footer
{
font:
bold 11px Arial;
vertical-align:
middle;
text-decoration:
none;
text-align:
center;
}
.gridView
thead tr
{
color:
#fff;
vertical-align:
middle;
height:
25px;
}
.gridView
thead tr th
{
margin
: 0 0 15px 0;
background:#000;
vertical-align:
middle;
padding:0 10px;
}
.gridView
thead tr a
{
font:
bold 11px Arial, Verdana;
color:
#333;
padding:
0 0 0 10px;
text-decoration:
underline;
vertical-align:
middle;
}
.gridView
thead tr a:hover
{
color:
#06c;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="margin:50px;">
<asp:DataList ID="dlemp" runat="server">
<HeaderTemplate>
<table class="gridView" id="dltable"><tr>
<thead>
<tr>
<th>Student Name</th>
<th>Student
Address </th>
<th>Student Class
</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td align="center">
<asp:Label ID="lblCName" runat="server" Text='<%# Eval("Emp_Name") %>'></asp:Label></td>
<td align="center">
<asp:Label ID="lblName" runat="server" Text='<%# Eval("emp_salary") %>'></asp:Label></td>
<td align="center">
<asp:Label ID="lblCity" runat="server" Text=' <%# Eval("emp_Adress") %>'></asp:Label></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
.png)
No comments:
Post a Comment