ASP.NET - scroll bar for gridview

Asked By msakt on 15-May-12 06:03 AM
how to set scroll bar gridview...if i sroll dont hide header of gridview just row only scroll
DL M replied to msakt on 15-May-12 06:10 AM
Use following code.

<table>
   <tr>
      <td>
        <asp:Panel ID="pnlGridView" runat="server" ScrollBars="Auto" Width="100%" Height="350px">
          <asp:GridView ID="gvData" runat="server">
            your GridView items
          </asp:GridView>
        </asp:Panel>
      </td>
    </tr>
</table>
kalpana aparnathi replied to msakt on 15-May-12 06:13 AM
hi,

One Best and easy way for scrollbar in gridview is that to add the gridview to an asp:Panel control, and set the desired Width and Height for the Panel with ScrollBars property set to Vertical.

Regards,
RAJASEKHAR RAJENDRAN replied to msakt on 15-May-12 06:14 AM
Hi msakt, 

Solve your Issue as in the code shown Below.

Html Source of the page look like this
 
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel1" runat="server" Height="200px"
             Width="200px" ScrollBars="Vertical">
 
<asp:GridView ID="GridView1" runat="server"
        AutoGenerateColumns="False" DataKeyNames="ID"
        DataSourceID="SqlDataSource1"
        RowStyle-VerticalAlign="Bottom"
        OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID"
        InsertVisible="False"
        ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="Name" HeaderText="Name"
                 SortExpression="Name" />
<asp:BoundField DataField="Location" HeaderText="Location"
               SortExpression="Location" />
</Columns>
<HeaderStyle CssClass="header"Height="20px" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [ID], [Name], [Location] FROM [Details]">
</asp:SqlDataSource>
</asp:Panel>
</div>
</form>
 
Now Add below mention css style in the head section of page
 
<head runat="server">
<title>Creating scrollable GridView with fixed headers</title>
<style type="text/css">
  .header
  {
  font-weight:bold;
  position:absolute;
  background-color:White;
  }
  </style>
</head>


the above code Should Run, but there would be some bug, 
that is the table contents hide with the Headers
To Solve the bug, perform the below.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if(e.Row.RowIndex == 0)
           e.Row.Style.Add("height","40px");
        }
    }


I Hope the above Solves,

Thanks & Regards,
Rajasekhar.R
http://rajasekharcbe-biztalk.blogspot.in/ 

DL M replied to msakt on 15-May-12 06:39 AM
Hi..

Add ScrollBar to GridView with ASP.NET.

Javascript

<script type="text/javascript">

function s()

{

var t = document.getElementById("<%=GridView1.ClientID%>");

var t2 = t.cloneNode(true);

for (i = t2.rows.length - 1; i > 0; i--)

t2.deleteRow(i);

t.deleteRow(0);

a.appendChild(t2);

}

window.onload = s;

</script>

 

Default.aspx.vb

Dim con As New SqlConnection(WebConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString)

Dim cmd As New SqlCommand("SELECT ContactName,CompanyName,Address FROM Customers", con)

If (Not IsPostBack) Then

Using con

con.Open()

GridView1.DataSource = cmd.ExecuteReader()

GridView1.DataBind()

End Using

End If


Web.Config Connection String

<connectionStrings>
    <add name="ConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\NORTHWND.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>
</connectionStrings>
Jitendra Faye replied to msakt on 15-May-12 06:42 AM
simply way...
<style type="text/css">
  .DataGridFixedHeader { POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop); BACKGROUND-COLOR: white }
</style>
 
And refer this style in your ASP datagrid, by setting this value to the CSSClass property of the HeaderStyle of the datagrid. For ex:
 
<asp:datagrid id="resultGrid" tabIndex="-1" runat="server" Width="900px" Height="224px" BorderStyle="None"> 
  <HeaderStyle Font-Names="Arial" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" BorderStyle="Solid"
  BorderColor="Black" VerticalAlign="Bottom" BackColor="LightSlateGray" CssClass="DataGridFixedHeader"></HeaderStyle>
..........
</asp:datagrid>

also
ref this link...


http://www.dotnetcurry.com/ShowArticle.aspx?ID=255

http://www.codeproject.com/KB/aspnet/Gridview_Fixed_Header.aspx
Somesh Yadav replied to msakt on 15-May-12 07:32 AM
hello,
try this,

http://www.aspnettutorials.com/tutorials/controls/gridviewscroll-aspnet2-csharp.aspx

http://stackoverflow.com/questions/1939299/scrollbar-on-a-gridview