Sunday, April 12, 2015

Freeze the Datalist header using Jquery in

Introduction: In this article today I will explain how to Freeze the Datalist header using Jquery in

Freeze the Datalist heade
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="">
<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> 
      $(document).ready(function () {
          $("#dltable").freezeHeader({ 'height': '200px' });
            font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;
            text-shadow:1px 1px 1px #fff;
            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;
            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;
    <form id="form1" runat="server">
    <div style="margin:50px;">
    <asp:DataList ID="dlemp" runat="server">
      <table class="gridView" id="dltable"><tr>
                <th>Student Name</th>
              <th>Student Address  </th>
                <th>Student Class </th>
              <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>


No comments:

Post a Comment