How to Create a Gridview with Scroll bar using ASP.NET 2.0 and VB is actually very simple
How to Create a Gridview with Scroll bar using ASP.NET 2.0 and VB 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.
|
Imports 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 Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If (Not IsPostBack) Then
Dim connectionString As String = "server=localhost;database=Northwind;Integrated Security=SSPI"
Dim customers As String = "SELECT ContactName,CompanyName,Address FROM Customers"
Using con As New SqlConnection(connectionString)
Dim ds As New DataSet()
Dim da As New SqlDataAdapter(customers, con)
da.Fill(ds, "Customers")
GridView1.Attributes.Add("style", "table-layout:fixed")
GridView1.AutoGenerateColumns = True
GridView1.DataSource = ds
GridView1.DataBind()
End Using
End If |
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
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 moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
The flow for the code behind page is as follows.
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports System.Data.SqlClient
Partial Public Class GridviewWithScrollbarCsharp
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If (Not IsPostBack) Then
Dim connectionString As String = "server=localhost;database=Northwind;Integrated Security=SSPI"
Dim customers As String = "SELECT ContactName,CompanyName,Address FROM Customers"
Using con As New SqlConnection(connectionString)
Dim ds As New DataSet()
Dim da As New SqlDataAdapter(customers, con)
da.Fill(ds, "Customers")
GridView1.Attributes.Add("style", "table-layout:fixed")
GridView1.AutoGenerateColumns = True
GridView1.DataSource = ds
GridView1.DataBind()
End Using
End If
End Sub |
Download the Full Working Version of this Project written with Visual Studio.NET VB 2005 Here!
Looking for the C# 2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!