Thursday, April 2, 2015

Freeze the Gridview header using Jquery in

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

Freeze the Gridview header

To implement this functionality we use the GridViewScroll  Jquery. To make it live in project follow the below given steps:
Step 1 : Download the GridViewScroll  Jquery and keep it in js folder of website.
Step 2 : After that link the js file to wepform (default.aspx) before </head>tag.

HTML Markup of Webform:
<html xmlns="">
<head runat="server">
    <title>Freeze Gridview Header</title>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
<script src="js/gridviewScroll.min.js" type="text/javascript"></script>
    <link href="js/GridviewScroll.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript">
         $(document).ready(function () {
             $('#<%=grdemployee.ClientID %>').gridviewScroll({
                 width: 366,
                 //back ground color
                  bgcolor: "#0000ffff ",
                   freezesize: 1,                  
                  arrowsize: 10,
                  varrowtopimg: "images/up-arrow.png",
                  varrowbottomimg: "images/arrow-down.png",
    <form id="form1" runat="server">
    <asp:GridView ID="grdemployee" runat="server" AutoGenerateColumns="False" DataKeyNames="ID">
    <asp:BoundField DataField="Emp_Name" HeaderText="Employee Name" />
     <asp:BoundField DataField="emp_salary" HeaderText="Employee Salary" />
      <asp:BoundField DataField="emp_Adress" HeaderText="Employee Address" />


Is this article helpful for you?

If yes post your comment to appreciate my work and fell free to contact me. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.

1 comment:

  1. click on gridview cell and display the selected row on textbox and update the same row using c# without template fields.using datatable