ASP.Net How to fixed 2 rows header Gridview

Question

Before getting in details, I would like to mention that I tried various solutions from stackoverflow and other too. But none suitable in my scenario. So, I provided detailed information.

I have a GridView and I want to make my header fixed, but I can not fix the header because there is 2 rows of header in my GridView.

I already tried to make my header fixed, but I just can make 1 row header fixed with jQuery. I need someone to help me, to fix this problem. Because I really need 2 rows of header.

Answer 1

You can use GridViewScroll with jQuery plugin, it's flexible and easy to use.

Here's a sample on how to apply it:

<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 type="text/javascript" src="../Scripts/gridviewScroll.min.js" />

 <script type="text/javascript"> 
    $(document).ready(function () { 
        gridviewScroll(); 
    }); 
    function gridviewScroll() { 
        $('#GridView1').gridviewScroll({ 
            width: 700, 
            height: 330, 
            freezesize: 2, 
            arrowsize: 30, 
            headerrowcount: 2 
        }); 
    } 
</script> 

<asp:gridView ID="GridView1" runat="server" />

Notice that you can control how many row headers to fix by changing the headerrowcount in gridviewScroll() function.

For further information please visit http://gridviewscroll.aspcity.idv.tw/

Hope this helps.