CODEWITHSUNDEEP
asp.net
raja
raja

Reputation: 93

Grid view static header in asp.net

I have a grid view i want a fixed header without style of overflow=scroll. that is when their is a more records the grid view scroll by default.now how i can show fixed header.

this is my grid view.

          <asp:GridView ID="gvStd" runat="server" DataKeyNames ="ID" AutoGenerateColumns="False" OnRowDataBound="gvStd_RowDataBound" 
            CssClass="table" EnableViewState="False" EmptyDataText="Such Not Found!"
            CellPadding="4" ForeColor="#333333" GridLines="None" OnRowCommand ="gvStd_RowCommand"  BorderStyle="None" >
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333"  CssClass="HeaderFreez"/>


            <Columns>

              <asp:TemplateField HeaderText="School Code" >

                    <ItemTemplate>
                        <asp:Label ID="lblSchoolCode" runat="server" 
          Text='<%# Bind("SCHOOL_CODE")%>'  />
                           <asp:TextBox ID="ID_TO_Update_All"  
               runat="server" Text='<%# Bind("ID")%>'  Visible="false" />
                    </ItemTemplate>

                </asp:TemplateField>
                <asp:TemplateField HeaderText="Class">
                    <ItemTemplate>
                        <asp:Label ID="lblClass" runat="server" Text='<%# 
              Bind("CLASS") %>'   Visible="true"/>

                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Sec">

                    <ItemTemplate>
                        <asp:Label ID="lblSection" runat="server" Text='<%# 
            Bind("SECTION") %>'   Visible="true"/>

                    </ItemTemplate>
                </asp:TemplateField>
     </Columns>
            <FooterStyle BackColor="#990000" Font-Bold="True" 
       ForeColor="White" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" 
         HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" 
       ForeColor="Navy" />
            <HeaderStyle BackColor="#00ba8b" Font-Bold="True" 
          ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>

Upvotes: 2

Views: 16450

Answers (3)

Nivas
Nivas

Reputation: 106

<style>
     th {
        background: cornflowerblue!important;
        color:white!important;
        position: sticky!important;
        top: 0;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }
    th, td {
        padding: 0.25rem;
    }
</style>
  1. Simply Add this styling in Head Tag of your webform.
  2. Directly add in your master page header for appling it to all sub pages.

Upvotes: 9

SubhenduGN
SubhenduGN

Reputation: 21

You can try this if you want pagination instead of scrolling, in that way your gridview header will be static.

<asp:GridView ID="gvStd" runat="server" AllowPaging="true" PageSize="10" ...>

I am using 10 rows/page. You can modify that with PageSize="**"

Upvotes: 0

Sunil
Sunil

Reputation: 3424

Follow these steps:

  1. Add HeaderStyle-Width="80px" ItemStyle-Width="80px" to your header template.
  2. Add this to grid style="height:400px; overflow:auto"

  3. Add the following CSS somewhere on the page

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

  4. Finally, your gridView tag should be like this

    <asp:GridView ID="gvStd" runat="server" style="height:400px; 
 overflow:auto" HeaderStyle-CssClass="FixedHeader" HeaderStyle-BackColor="YellowGreen"
 AutoGenerateColumns="false" AlternatingRowStyle-BackColor="WhiteSmoke" 
 OnRowDataBound="gvStd_RowDataBound">

  5. If the first row gets overlapped, try adding this code:

    protected void gvStd_RowDataBound(object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
     if (e.Row.RowIndex == 0)
         e.Row.Style.Add("height", "50px");
  }
}

Upvotes: 0

Related Questions