Introduction: In this
article today I will explain how to Freeze repeater 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">
<title>Freeze
Repeater Header</title>
<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 () {
$("#reptable").freezeHeader({
'height': '200px' });
})
</script>
<!--Style
-->
<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="width:50%">
<fieldset>
<legend>Freeze
Repeater Header</legend>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table id="reptable" class="gridView" ><tr>
<thead>
<tr>
<th><b>Student Name</b> </th>
<th>Student
Address </th>
<th>Student Class
</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr style="font-style:italic;">
<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:Repeater>
</fieldset>
</div>
</form>
</body>
</html>
No comments:
Post a Comment