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; |
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
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(); } } |
If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
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> |
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.
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(); } } } |
Download the Full Working Version of this Project written with Visual Studio.NET C# 2005 Here!
Looking for the VB.NET 2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!