Sunday, April 12, 2015

Freeze the Datalist header using Jquery in asp.net

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

Description:
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="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>
download


No comments:

Post a Comment