ASP.NET : Freeze GridView Header using GridViewScroll jQuery plugin




When you have lots of rows to be displayed in a gridview say for example 500 records, if an user is interested in seeing 400th record, the user has to scroll all the way down through the page, if there is no paging or scrolling functionality. Also when gridview is made scrollable, headers will also scroll along with the other gridview contents making it difficult for the user to understand the data properly. There are many javascript and css solutions to freeze gridview header, but each of them has its own drawback like some solutions are not compatible with all browsers, some does not get aligned properly and some does not support other gridview features such as paging and sorting. 

Recently, I came across a jQuery plugin called GridViewScroll that enables scrolling in a gridview with fixed headers and is compatible with majority of the browsers. Since this is a client side plugin, this can be used with simple html table also. I used this plugin in one of my real-time applications and found this to be very efficient, since it can be used along with other features of gridview such as paging, sorting and can freeze gridview columns too. We can also use this plugin with Gridview inside AJAX UpdatePanel for other dynamic operations.

Freeze GridView Header using GridViewScroll jQuery Plugin



It is very simple and easy to implement.

1. Download GridViewScroll jQuery plugin from here.

2. Add the css file, jQuery file and images from the download to your ASP.NET project.

3. In your aspx file, use the below code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Fixed Header GridView</title>   
    <link href="Styles/GridviewScroll.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
    <script src="Scripts/gridviewScroll.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            gridviewScroll();
        });

        function gridviewScroll() {
            $('#<%=GridView1.ClientID%>').gridviewScroll({
                width: 660,
                height: 300,
                startHorizontal:0,
                wheelstep:10,
                barhovercolor:"#3399FF",
                barcolor: "#3399FF"
            });
        } 
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>   
        <div style="width:670px;margin-left:auto;margin-right:auto;">
        <h2 style="text-align:center;">Freeze/Fixed GridView Header using GridViewScroll jQuery plugin</h2>
        <p style="text-align:center;">Demo by Priya Darshini - Tutorial @ <a href="">Programmingfree</a></p>                     
            <asp:GridView ID="GridView1" runat="server" Width="660px"
                AutoGenerateColumns="false" AllowPaging="false">
            <Columns>
                <asp:BoundField DataField="Code" HeaderText="Code" />
                <asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-Width="150px" ItemStyle-Width="150px" ItemStyle-CssClass="Wrap" />
                <asp:BoundField DataField="Continent" HeaderText="Continent" />
                <asp:BoundField DataField="Region" HeaderText="Surface Area" />
                <asp:BoundField DataField="Population" HeaderText="Population" />
                <asp:BoundField DataField="IndepYear" HeaderText="Year of Independence" />
                <asp:BoundField DataField="LocalName" HeaderText="Local Name" />
                <asp:BoundField DataField="Capital" HeaderText="Capital" />
                <asp:BoundField DataField="HeadOfState" HeaderText="Head of State" />
                <asp:BoundField DataField="SurfaceArea" HeaderText="Surface Area" />
            </Columns>
            <HeaderStyle CssClass="GridviewScrollHeader" /> 
            <RowStyle CssClass="GridviewScrollItem" /> 
            <PagerStyle CssClass="GridviewScrollPager" /> 
            </asp:GridView>
        </div>  
    </div>    
    </form>    
</body>
</html>

Do not forget to reference jQuery and jQueryUI library in aspx page. In the above code, after page had loaded we are calling gridviewscroll jquery method with all necessary parameters like width and height of gridview.

4. Write code to load gridview with data in code-behind, I have written code to fetch data from mysql database below,
public partial class GridViewScroll : System.Web.UI.Page
    {
        DataTable dt;
        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                //Fetch data from mysql database
                MySqlConnection conn = new MySqlConnection("server=localhost;uid=root;password=xxxxx;database=world; pooling=false;");
                conn.Open();
                string cmd = "select * from country";
                MySqlDataAdapter dAdapter = new MySqlDataAdapter(cmd, conn);
                DataSet ds = new DataSet();
                dAdapter.Fill(ds);
                dt = ds.Tables[0];
                //Bind the fetched data to gridview
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
            catch (MySqlException ex)
            {
                System.Console.Error.Write(ex.Message);

            }              

        }
    }

5. That is all, now build the project. You can see a beautiful gridview with fixed header, horizontal and vertical scroller. Take a look at the live demo here and start using it to create fixed header gridviews.

There are a lot of other things that you can do with GridViewScroll such as freezing columns, header column merge, row hover, cell wrap etc. I hope this post will help you to get started with GridViewScroll.


Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!


Subscribe to GET LATEST ARTICLES!


advertise here

Related

jQuery UI 4263249385424933105

Post a Comment

  1. Replies
    1. Hi Priya, I found this very helpful. I still need your help... My requirement is to use the arrow up and down key for navigating the gridview rows. Can you please let me know is there a work around for that? Your help is greatly appreciated.

      Delete
  2. Replies
    1. Hi Likol,

      Thank you for creating such a wonderful plugin for us! I am happy that you stopped by here to read this post!

      Thanks,
      Priya

      Delete
  3. Hi mam..
    Jquery code for fix header gridview is not working properly under update panel. after rebind the gridview sgow as normally....
    Please give me any solution. Iam waiting ur relpy......please give me reply
    Thank U..

    ReplyDelete
    Replies
    1. Hi,

      You have to tweak this code a little to make it work with update panel. Check out the link below and you have the exact code here,

      http://gridviewscroll.aspcity.idv.tw/Demo/Support.aspx#UpdatePanel

      Hope this helps!

      Delete
  4. How to add reference jQuery and jQueryUI library

    ReplyDelete
    Replies
    1. Hi,

      This is how we reference the libraries in aspx page,

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

      Though I have added this code to reference these libraries in my article, I wrote it as an heads up in case if you choose to download these libraries and specify the file path in your project directory.

      Thanks,
      Priya

      Delete
  5. I follow the step but I can not get the right result.
    I can not freeze the header. My gridview is in Panel do I need to set the div

    ReplyDelete
  6. I'm using jquery-1.10.1.min.js in my application. When I attempt to use this plugin it generates an error. Any chance you will update the plugin?

    ReplyDelete
    Replies
    1. Hi,

      This plugin is developed and offered by Likol Lee. You can find more information on this and can post your questions in his project site here, http://gridviewscroll.aspcity.idv.tw/Contact.aspx

      Hope this helps!

      Delete
  7. hi
    Thanx this very nice article.
    i have used in my project and its working good.
    once again thanx

    ReplyDelete
  8. Hi priya
    freeze-gridview-header-using-jquery code has working properly in C#.net(web application).but the problem is when i am run in a perticular page it automatically go for defaultpage.i need what i did wrong...
    pls reply..

    ReplyDelete
  9. Hi mam,
    Thanks for your post. It's working fine, but column freezing is not working there. why? is there add any extra code? please give me rply

    ReplyDelete
    Replies
    1. Hi,

      Yes. You have to add an option called freezesize in your jquery code.

      $(document).ready(function () {
      gridviewScroll();
      });

      function gridviewScroll() {
      $('#<%=GridView1.ClientID%>').gridviewScroll({
      width: 660,
      height: 200,
      freezesize: 2
      });
      }

      Check this out, http://gridviewscroll.aspcity.idv.tw/Demo.aspx#Freeze

      Hope this helps!

      Delete
  10. Hi,

    Freeze is working. But header alignment is missing in the gridview. Any suggestion

    ReplyDelete
  11. Hi,

    Freeze is working. But header alignment is missing in the gridview. Any suggestion

    ReplyDelete
  12. Hi its not working for me.. its giving this error Object doesn't support property or method 'gridviewScroll'

    ReplyDelete
  13. Frezee is working, but how to header column merge.
    link http://gridviewscroll.aspcity.idv.tw/ died

    ReplyDelete
  14. Hi Priya, This code is very helpful but it is not working with master page. please provide me the solution for master page

    ReplyDelete
  15. Hi Priya,

    Thanks for the article. I tried to use the code on a page that inherits from a Master Page and also the grid is in an updatepanel..

    I saw the link to the Demo page that says "update panel" but I don't see what differences exist there. The Scroll works but the Header Line columns don't line up with the data columns properly.In my asp i have set the specific widths for itemstyle-width and i had also added headerstyle-width still didn't help.

    Any Suggestions would be greatly appreciated..

    Regards
    Meir

    ReplyDelete

emo-but-icon

Currency Converter

Built using AngularJS and ASP.NET Web API

SUBSCRIBE


item