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

    Need detail about gridview

    Dear Friends
    In my project i have grid view with div tag. when i was enter the value in grid that grid header should freeze mode..


    can any one guide me
  • #764632
    basically to resolve this You need 3 DIVs: a general container (in my case of class "outer"), a table container (in my case of class "inner") and a DIV in which you make a clone of an existing table using jQuery or javaScript (in my case of class "header").

    Solution uses CSS and a few lines of jQuery code, which clones HTML of "inner" into "header" and sets its width and height
    check below link
    http://stackoverflow.com/questions/486576/frozen-table-header-inside-scrollable-div/1533619#1533619
    OR
    http://www.fixedheadertable.com/

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

  • #764633
    Hi,
    You can simple achieve using basic CSS and Div to make a GridView scrollable with fixed header.

    <style type="text/css">
    .FixedHeader {
    position: absolute;
    font-weight: bold;
    }
    </style>

    Apply this CSS class on HeaderStyle of GridView.
    I have previously written an article on same, please have a look at detailed example.
    https://www.pyarb.com/asp-net/gridview-with-fixed-header-and-scrollbar.html

    All the Best.

    -------------
    Glad to be,
    John Bhatt
    Editor - DNS Forums
    https://www.pyarb.com

  • #764636
    Hi,

    try the below...
    <style type="text/css">
    .fixedHeader
    {
    font-weight:bold;
    position:absolute;
    background-color: #006699;
    color: #ffffff;
    height: 25px;
    }
    </style>

    <div style="OVERFLOW: auto; WIDTH: 800px; HEIGHT: 240px">
    <asp:GridView ID="GridView1" runat="server">
    <HeaderStyle CssClass="fixedHeader " />
    </asp:GridView>
    </div>

    Hope this will helps you.Let me know if it works.

    Regards,
    SonyShiva
    Never lose hope..You never know what tomorrow will bring

  • #764640
    Hi,

    You can try placing 2 DIV's with fixed and same width. Design one DIV with table tag which will consists only your grid columns i.e. header text's. Inside second DIV (which will be just below and having fixed width same as your first DIV), place your grid view with all columns having HeaderText property="".

    Hope it helps.
    Regards,
    Shashikant Gurav
    shashikantgurav22@gmail.com

  • #764647
    Hi,

    First keep your gridview inside a div tag like below,


    <div style="OVERFLOW: auto; WIDTH: 800px; HEIGHT: 240px">
    <asp:datagrid id="GridView1" runat="server"....

    <HeaderStyle CssClass="FixedHeader" />


    </div>


    Then use below CSS to make your header of the gridview fixed,


    <style type="text/css">
    .FixedHeader
    {
    font-weight:bold;
    position:absolute;
    background-color:White;
    }
    </style>



    Let me know if you have any doubt on above code.


    Regards,
    Asheej T K
    Microsoft MVP[ASP.NET/IIS]
    DotNetSpider MVM


Sign In to post your comments