how to create scrollable dynamic gridview

Try this

1. Place the Gridview inside a panel and adjust its height to a required value (Now i have set Height="250px") and give the Scrollbars Property to 'Auto' ( ScrollBars="Auto")

Then the code will look like the one below.

 <asp:Panel ID="Panel1" runat="server" Height="250px" ScrollBars="Auto">
         <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE"           BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Verdana" Font-Size="0.7em"ForeColor="Black" GridLines="Vertical" Width="1100px" style="left: 117px; position: relative; top: 29px">
     <FooterStyle BackColor="#CCCC99" />
     <RowStyle BackColor="#F7F7DE" />
     <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
     <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
      <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
      <AlternatingRowStyle BackColor="White" />
 
          <Columns>
                <asp:CommandField ButtonType="Button" ShowSelectButton="True" />
            </Columns>
        </asp:GridView>
 </asp:Panel>

Try the following, put the gridview inside <div> and set a height

<div style="scroll=auto; height:UrNeedWhich fits 20 rows of the Grid;">
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE"
            BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Verdana" Font-Size="0.7em"
            ForeColor="Black" GridLines="Vertical" Width="1100px" style="left: 117px; position: relative; top: 29px">
            <FooterStyle BackColor="#CCCC99" />
            <RowStyle BackColor="#F7F7DE" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:CommandField ButtonType="Button" ShowSelectButton="True" />
            </Columns>
        </asp:GridView>
</div>

Select allOpen in new window

OK this is it, it works, but when I scroll first row with column names (head row) of gridview disappear as I scroll down. How can I make them fixed so they dont move as I scroll?

You need to do a trick here then, set the headertext visible as false, and have a <div style="position:fixed;"> above the gridview <div>. this will solve you.

else you should depend on a third party tool called telerik, just refer the following, you'll get an idea.

http://demos.telerik.com/aspnet-ajax/grid/examples/client/virtualscrollpaging/defaultcs.aspx

Write a CSS class as below,

.Freezing
{
   position:relative ;
   top:expression(this.offsetParent.scrollTop);
   z-index: 10;
}
and do as folows, set the  HeaderStyle-CssClass="Freezing" as below, it'll work for you..

<div style="scroll=auto; height:UrNeedWhich fits 20 rows of the Grid;">
<asp:GridView ID="GridView1" runat="server" HeaderStyle-CssClass="Freezing" BackColor="White" BorderColor="#DEDFDE"
            BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Verdana" Font-Size="0.7em"
            ForeColor="Black" GridLines="Vertical" Width="1100px" style="left: 117px; position: relative; top: 29px">
            <FooterStyle BackColor="#CCCC99" />
            <RowStyle BackColor="#F7F7DE" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:CommandField ButtonType="Button" ShowSelectButton="True" />
            </Columns>
        </asp:GridView>
</div>

I used the solution with asp:Panel and this trick with <div> position is not working, what is the "trick" with Panel.

Try the last hint I sent you, with CSS and HeaderStyle-CssClass set, that will do for you..

i did this way but still no fixed header, what do I have to do to create CSS class .Freezin? Where do I have to pute code, in code begind, in .aspx page or...?

Use the following expressions within the css class

top:expression(this.parentNode.parentNode.parentNode.parentNode.scrollTop-1);
left:expression(this.parentNode.parentNode.scrollTop-1);

This fix header and it looks perfect when scrolling GridView, but when I scroll complete page everything else is moving in right direction except gridview header and when I scroll down to the end header is in over the GridView.

Use this css class for Gridview Header

.GridViewHeader
{
      text-align: left;
      font-size: 8pt;
      position: relative;
      color: #ffffff;
      background-color: #5B7E9F;
      font-weight: bold;
      top: expression(this.parentNode.parentNode.parentNode.parentNode.scrollTop-1);
      left: expression(this.parentNode.parentNode.scrollTop-1);
      height: 18px;
}

now it is not working at all, this is how it looks like
in code-behind I have
Session("myDataTable") = myDt
Me.GridView1.DataSource = myDt
Me.GridView1.Attributes.Add("style", "table-layout:fixed")
Me.GridView1.AutoGenerateColumns = True
Me.GridView1.DataBind()

<body>
<script>
.GridViewHeader
{
      text-align: left;
      font-size: 8pt;
      position: relative;
      color: #ffffff; 
      background-color: #5B7E9F;
      font-weight: bold;
      top: expression(this.parentNode.parentNode.parentNode.parentNode.scrollTop-1);
      left: expression(this.parentNode.parentNode.scrollTop-1);
      height: 18px;
}
</script>
    <form id="form1" runat="server">
    <div>
        <asp:ImageButton ID="Upisi" runat="server" ImageUrl="~/Images/upis_button.jpg" /><div>
    </div>
        <asp:Panel ID="Panel1" runat="server" Height="400px" Width="1100px" ScrollBars="Both">
        <asp:GridView ID="GridView1" runat="server" HeaderStyle-CssClass="GridViewHeader" BackColor="White" BorderColor="#DEDFDE"
             BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Verdana" Font-Size="0.7em"
             ForeColor="Black" GridLines="Vertical" Width="1079px" style="left: 2px; position: relative; top: 2px">
             <FooterStyle BackColor="#CCCC99" />
             <RowStyle BackColor="#F7F7DE" />
             <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
             <SelectedRowStyle BackColor="#333333" Font-Bold="True" ForeColor="Yellow" />
             <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
             <AlternatingRowStyle BackColor="White" />
 
          <Columns>
                <asp:CommandField ButtonType="Button" ShowSelectButton="True" />
            </Columns>
        </asp:GridView>
        </asp:Panel>

Select allOpen in new window

Thanks maheshsnkr this is working great, just what I want.