You must Sign In to post a response.
  • Category: ASP.NET

    How to Freeze GridView Header Only on Scroll in Asp.Net

    Hi Developers,

    How to Freeze GridView Header Only on Scroll in Asp.Net
    (Header Fixed rows only scrollable)

    In gridview am using ItemTemplate,Footer Template & Edit Item Template.


    I have tried it is working demo project but not working in my Original Process.
    So Please help me with some idea to i am done the task.

    Thanks with
    Paul.S
  • #765319

    Hi,

    The best approach for fixed header is using Jquery, with simple steps you can achieve your goal.

    Add JQuery Plugins, for this we download from below link use the below link and download the plugins.

    http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

    http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js

    http://gridviewscroll.aspcity.idv.tw/

    after call the script files then wrote below lines of code.


    <script type="text/javascript" src="../Scripts/jquery1.8.2.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery1.9.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/gridviewScroll.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    gridviewScroll();
    });

    function gridviewScroll() {
    $('#<%=gv.ClientID%>').gridviewScroll({
    width: 1100,
    height: 200
    });
    }
    </script>



    In the above code "gv" is called as gridview Id.

    For more information regarding this refer below link, here I explain you how to achieve the above task
    http://www.dotnetspider.com/resources/45021-Scrollable-GridView-using-JQuery.aspx

    Hope this will helpful to you....


    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/

  • #765320
    Thanks Mr.Naveen for your quick reply .
    I will try and let you know

  • #765322

    1. Write a Css for GridView header position.
    2. Add the Css in GridView's HeaderStyle tag.
    3. Set column header width.
    see ASPX file
    <div style="overflow:scroll; height:250px; width:600px;" >
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
    CellPadding="4" ForeColor="#333333" Width="600px">
    <Columns>
    <asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-Width="271px" />
    <asp:BoundField DataField="Branch" HeaderText="Branch" HeaderStyle-Width="91px" />
    <asp:BoundField DataField="City" HeaderText="City" HeaderStyle-Width="194px" />
    </Columns>
    <HeaderStyle CssClass="header" BackColor="#7961da"
    Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    </asp:GridView>
    </div>


    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #765324
    Thanks Mr.Prasad. and Naveen.
    then Naveen I got output with help of you previous posted code naveen
    but i can't able to increase height more than 200px in javascript code;
    How can i increase the scroll height in my javascript.
    how i can Choose the best answer.

    Thanks with
    Paul.S

  • #765325
    Hi Paul,

    If you want to increase the height/ width then set the same in javascript function.

    Refer below

    function gridviewScroll() {
    $('#<%=gv.ClientID%>').gridviewScroll({
    width: 1100,
    height: 500
    });
    }


    Hope this will helpful to you...

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/


Sign In to post your comments