Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. ASP.NET
  4. How to make fixed header in gridView inside asp:panel?

How to make fixed header in gridView inside asp:panel?

Scheduled Pinned Locked Moved ASP.NET
questionsysadminhelptutorial
6 Posts 3 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    mittalpa
    wrote on last edited by
    #1

    Hi I ran into a strange issue. I am able to put gridview inside asp:panel and scrolling works too. But the moment I down, the header of gridView scrolls above inside the panel and gets hidden. I just want to scroll rows, not the header. How can I do that? Please advise. Following is what I am using. On a side note, I have tried to wrap gridView in DIV but div doesn’t show the scroll bars in the first load for some reason. Thanks

    <asp:Panel ID="Panel1" runat="server" ScrollBars="Both" Height="200" Width="60%">
    <asp:GridView ID="GvBidLists" AllowSorting="true" AllowPaging="false" runat="server"
    AutoGenerateEditButton="true" DataKeyNames="ListId" EmptyDataText="No data available."
    AutoGenerateColumns="False" >
    <EditRowStyle BackColor="skyblue" />
    <HeaderStyle BackColor="LightSteelBlue" ForeColor="#0000C0" Height="20px" HorizontalAlign="Center" />
    <RowStyle Height="20px" VerticalAlign="Middle" />
    <FooterStyle BorderColor="White" Height="20px" HorizontalAlign="Center" />
    <Columns>
    <asp:BoundField HeaderText="ListId" DataField="ListId" SortExpression="ListId" />
    <asp:BoundField HeaderText="ListName" DataField="ListName" SortExpression="ListName" />
    <asp:BoundField HeaderText="ProductTypeName" DataField="ProductTypeName" SortExpression="ProductTypeName" />
    <asp:BoundField HeaderText="Size" DataField="Size" SortExpression="Size" />
    </Columns>
    </asp:GridView>
    </asp:Panel>

    Follow your goals, Means will follow you ---Gandhi---

    Y S 2 Replies Last reply
    0
    • M mittalpa

      Hi I ran into a strange issue. I am able to put gridview inside asp:panel and scrolling works too. But the moment I down, the header of gridView scrolls above inside the panel and gets hidden. I just want to scroll rows, not the header. How can I do that? Please advise. Following is what I am using. On a side note, I have tried to wrap gridView in DIV but div doesn’t show the scroll bars in the first load for some reason. Thanks

      <asp:Panel ID="Panel1" runat="server" ScrollBars="Both" Height="200" Width="60%">
      <asp:GridView ID="GvBidLists" AllowSorting="true" AllowPaging="false" runat="server"
      AutoGenerateEditButton="true" DataKeyNames="ListId" EmptyDataText="No data available."
      AutoGenerateColumns="False" >
      <EditRowStyle BackColor="skyblue" />
      <HeaderStyle BackColor="LightSteelBlue" ForeColor="#0000C0" Height="20px" HorizontalAlign="Center" />
      <RowStyle Height="20px" VerticalAlign="Middle" />
      <FooterStyle BorderColor="White" Height="20px" HorizontalAlign="Center" />
      <Columns>
      <asp:BoundField HeaderText="ListId" DataField="ListId" SortExpression="ListId" />
      <asp:BoundField HeaderText="ListName" DataField="ListName" SortExpression="ListName" />
      <asp:BoundField HeaderText="ProductTypeName" DataField="ProductTypeName" SortExpression="ProductTypeName" />
      <asp:BoundField HeaderText="Size" DataField="Size" SortExpression="Size" />
      </Columns>
      </asp:GridView>
      </asp:Panel>

      Follow your goals, Means will follow you ---Gandhi---

      Y Offline
      Y Offline
      Yusuf
      wrote on last edited by
      #2

      have you seen this?[^]. There are many more examples at here[^]

      Yusuf May I help you?

      S 1 Reply Last reply
      0
      • M mittalpa

        Hi I ran into a strange issue. I am able to put gridview inside asp:panel and scrolling works too. But the moment I down, the header of gridView scrolls above inside the panel and gets hidden. I just want to scroll rows, not the header. How can I do that? Please advise. Following is what I am using. On a side note, I have tried to wrap gridView in DIV but div doesn’t show the scroll bars in the first load for some reason. Thanks

        <asp:Panel ID="Panel1" runat="server" ScrollBars="Both" Height="200" Width="60%">
        <asp:GridView ID="GvBidLists" AllowSorting="true" AllowPaging="false" runat="server"
        AutoGenerateEditButton="true" DataKeyNames="ListId" EmptyDataText="No data available."
        AutoGenerateColumns="False" >
        <EditRowStyle BackColor="skyblue" />
        <HeaderStyle BackColor="LightSteelBlue" ForeColor="#0000C0" Height="20px" HorizontalAlign="Center" />
        <RowStyle Height="20px" VerticalAlign="Middle" />
        <FooterStyle BorderColor="White" Height="20px" HorizontalAlign="Center" />
        <Columns>
        <asp:BoundField HeaderText="ListId" DataField="ListId" SortExpression="ListId" />
        <asp:BoundField HeaderText="ListName" DataField="ListName" SortExpression="ListName" />
        <asp:BoundField HeaderText="ProductTypeName" DataField="ProductTypeName" SortExpression="ProductTypeName" />
        <asp:BoundField HeaderText="Size" DataField="Size" SortExpression="Size" />
        </Columns>
        </asp:GridView>
        </asp:Panel>

        Follow your goals, Means will follow you ---Gandhi---

        S Offline
        S Offline
        Sandeep Mewara
        wrote on last edited by
        #3

        Try: Step 1 : Create a CSS class as following

        .HeaderFreez
        {
        position:relative ;
        top:expression(this.offsetParent.scrollTop);
        z-index: 10;
        }

        Step 2 Set Gridview’s HeaderStyle CssClass as CssClass="HeaderFreez"

        1 Reply Last reply
        0
        • Y Yusuf

          have you seen this?[^]. There are many more examples at here[^]

          Yusuf May I help you?

          S Offline
          S Offline
          Sandeep Mewara
          wrote on last edited by
          #4

          Yusuf wrote:

          have you seen this?[^].

          Have you seen the solution given there? There is nothing that would freeze a grid header in that css.

          Y 1 Reply Last reply
          0
          • S Sandeep Mewara

            Yusuf wrote:

            have you seen this?[^].

            Have you seen the solution given there? There is nothing that would freeze a grid header in that css.

            Y Offline
            Y Offline
            Yusuf
            wrote on last edited by
            #5

            No I did not try that example. Nor did I made any claim as far as it working. If you see the second link it was to LMGTFY.

            Yusuf May I help you?

            S 1 Reply Last reply
            0
            • Y Yusuf

              No I did not try that example. Nor did I made any claim as far as it working. If you see the second link it was to LMGTFY.

              Yusuf May I help you?

              S Offline
              S Offline
              Sandeep Mewara
              wrote on last edited by
              #6

              Yep... got that... was sort of a FYI to you!

              1 Reply Last reply
              0
              Reply
              • Reply as topic
              Log in to reply
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes


              • Login

              • Don't have an account? Register

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • World
              • Users
              • Groups