Freeze repeater header using Jquery in asp.net - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Freeze repeater header using Jquery in asp.net

Introduction: In this article today I will explain how to Freeze repeater header using Jquery in asp.net
Freeze repeater header using Jquery

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>
Download

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon