Creating a Scrollable DataGrid...

原创 2004年10月06日 20:22:00

Place a DataGrid, or any other control or set of controls, within a scrollable region on your .NET web forms.

By: John Kilgo Date: November 23, 2003 Download the code. Printer Friendly Version

There are many times when it is inconvenient or unattractive to have a datagrid or other set of controls longer than the displayable page in the browser. I would prefer the user not to have to scroll the entire page if possible.

There is a way of accomplishing this that does not have anything at all to do with .NET. It actually has to do with using a style attribute within a <DIV> tag. While this is not a .NET technique, it may prove to be very useful to you in your .NET programming. The tag takes the form:

<DIV style="OVERFLOW-Y:scroll; WIDTH:760px; HEIGHT:570px">

The Width and Height styles allow you to determine the size of the scrollable region. The 760px and 570px shown above are just what I used for the example program. You can make them whatever you need them to be. The OVERFLOW-Y:scroll tells the browser to scroll the div vertically. All you have to do is place a table of objects, or a single object such as a datagrid within the DIV and it will be scrollable. You will be able to see this for yourself if you run the example program available at the bottom of this page, and/or download the sample code.

The example .aspx file (ScrollingGrid.aspx), which demonstrates the technique is shown below.

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="ScrollingGrid.aspx.vb" Inherits="DotNetJohn.ScrollingGrid"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="">
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table border="1" bgcolor="#EEEEEE" style="WIDTH: 780px; HEIGHT: 580px">
    <td align="center">Northwind Customers</td>
    <div style="OVERFLOW-Y:scroll; WIDTH:760px; HEIGHT:570px">
      <table bgcolor="#FFFFFF">
            <asp:DataGrid ID="dtgCusts" Runat="server"
                          BorderColor="#999999" BorderStyle="None"
                          BorderWidth="1px" BackColor="White"
                          CellPadding="3" GridLines="Vertical">
              <AlternatingItemStyle BackColor="#DCDCDC"></AlternatingItemStyle>
              <ItemStyle ForeColor="Black" BackColor="#EEEEEE"></ItemStyle>
              <HeaderStyle Font-Bold="True" ForeColor="White" BackColor="#000084"></HeaderStyle>

The .aspx.vb file, which just binds the datagrid to a datareader from the Northwind Customers table is shown below.

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Public Class ScrollingGrid
  Inherits System.Web.UI.Page

'-- Web Form Designer Generated Code Omitted --

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    Dim strSql As String = "Select CustomerID, CompanyName, ContactName, Phone, Fax From Customers"
    Dim objConn As New SqlConnection(ConfigurationSettings.AppSettings("NorthwindConnection"))
    Dim objCmd As New SqlCommand(strSql, objConn)
      dtgCusts.DataSource = objCmd.ExecuteReader()
    Catch ex As SqlException
    End Try
  End Sub

End Class

I hope you will find this technique useful in your .NET programming.

You may run the program here.
You may download the code here.

2.23 Creating Scrollable Content with UIScrollView

他是一个UIView,你可以像对待UIView一样对待它。 你需要特别注意的是他的contentSize 属性,如果没设置好,他将不会滚屏(contentSize应该大于UIScrollView 的...
  • swibyn
  • swibyn
  • 2013年11月11日 14:41
  • 460

动态链接警告:creating a DT_TEXTREL in object

前一段时间将一个模块做成动态库的过程中,编译.so的时候有一个警告:creating a DT_TEXTREL in object。 但是明明makefile里面是有加fPIC的,不知为何还会生成D...
  • jinnlxl
  • jinnlxl
  • 2014年11月28日 17:18
  • 2168

jQuery Tools Scrollable

参考链接 点击打开链接 var scrollable=$("div.scrollable").scrollable(); //alert(scrollable.getConf().prev...
  • enter89
  • enter89
  • 2016年04月27日 19:36
  • 716

bin/ld.bfd: warning: creating a DT_TEXTREL in a shared object解决办法

  • acm2008
  • acm2008
  • 2017年11月06日 16:35
  • 147

jQueryTools Scrollable详解

  • tinico
  • tinico
  • 2014年01月09日 09:19
  • 4895


很多时候我们需要将滚动view的滚动条滚动至底部,如通话记录,下面介绍一下代码: 首先是取得scroller,其实像dataview、list、nestlist等都包含有scrallable,他是v...
  • Yelbosh
  • Yelbosh
  • 2012年06月23日 15:41
  • 2350

ios has ambiguous scrollable content height

看到这些。你一定是碰到了跟我一样的情况。。。 UIScrollView在xib里面的布局是很令人头疼的。因为它不仅仅要确定内部空间的相对位置。还得知道自己的contentSize大小,而令人...
  • fanhaofei1234
  • fanhaofei1234
  • 2015年11月30日 17:11
  • 1217

Tomcat Creating a new instance of CacheManager

项目中Tomcat 报错警告: Creating a new instance of CacheManager using the diskStorePath "D:/Apache Tomcat 6....
  • xinxing727
  • xinxing727
  • 2011年04月15日 15:16
  • 2860

omapl138平台,BIOS5.41系统warning: creating output section ".vecs" without a SECTIONS specification

前段时间调试程序,调试的平台是omapl138 上,基于BIOS5.41操作系统,原来的程序是裸机的,后来我想测试一下看在操作系统里面怎么用,然后就新建了一个配置文件omapl138test001.t...
  • wangkeyen
  • wangkeyen
  • 2012年10月23日 15:55
  • 949

【转】深入理解JDBC Scrollable ResultSet

  • wag2765
  • wag2765
  • 2016年01月25日 16:29
  • 343
您举报文章:Creating a Scrollable DataGrid...