Navigator : Home > Tutorials > Controls Tutorials > ...
Create a Gridview with Scroll using ASP.NET and C#
How to Create a Gridview with Scroll bar using ASP.NET 2.0 and C# is actually very simple
How to Create a Gridview with Scroll bar using ASP.NET 2.0 and C# is actually very simple. First, you will need to import the System.Data.SqlClient namespace for binding data to GridView. Then enclose your Gridview in a <div> tag and set the overflow style to auto/scroll.
| using System.Data.SqlClient; |
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
We use the Page_Load event to bind the data. Then we can dynamically add style to GridView for layout.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
string connectionString = "server=localhost;database=Northwind;Integrated Security=SSPI"; string customers = "SELECT ContactName,CompanyName,Address FROM Customers"; using (SqlConnection con = new SqlConnection(connectionString)) {
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(customers, con);
da.Fill(ds, "Customers");
GridView1.Attributes.Add("style", "table-layout:fixed");
GridView1.AutoGenerateColumns = true;
GridView1.DataSource = ds;
GridView1.DataBind(); } } |
The front end .aspx page looks something like this: DIV with "style="overflow-y: scroll; height: 200px" in aspx page will create a scrollbar.
<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>
<table width="600" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#cccccc">
<tr> <td bgcolor="#eeeeee" class="header1"> <fieldset> <legend>GridviewWithScrollbar</legend> <div id="a"> </div> <div style="overflow-y: scroll; height: 200px"> <asp:GridView ID="GridView1" runat="server" Font-Size="12px" BackColor="#FFFFFF" GridLines="Both" CellPadding="4" Width="560"> <HeaderStyle BackColor="#EDEDED" Height="26px" /> </asp:GridView> </div> </fieldset> </td> </tr> |
The flow for the code behind page is as follows.
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class GridviewWithScrollbarCsharp : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
string connectionString = "server=localhost;database=Northwind;Integrated Security=SSPI"; string customers = "SELECT ContactName,CompanyName,Address FROM Customers"; using (SqlConnection con = new SqlConnection(connectionString)) {
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(customers, con);
da.Fill(ds, "Customers");
GridView1.Attributes.Add("style", "table-layout:fixed");
GridView1.AutoGenerateColumns = true;
GridView1.DataSource = ds;
GridView1.DataBind(); } } } |
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
Looking for the VB.NET 2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!