Creating a Scrollable DataGrid

This live demo shows how to create a scrollable DataGrid by using a <div> tag with its overflow style attribute set to auto.


TitleDate WrittenCommentsViews
An Extensive Examination of the DataGrid Web Control: Part 14/5/2002This article, by Scott Mitchell, examines the very basics of the DataGrid, illustrating how to bind data to a DataGrid. (This article complements Chapter 1 of ASP.NET Data Web Controls Kick Start.)21150
Displaying Records in a DataGrid in Random Order5/10/2003This article, by Scott Mitchell, examines how to display the results of a SQL query in random order in a DataGrid.5691
Adding a New Record to the DataGrid in the Footer2/12/2003This article, by John Sanborn, looks at how to use the DataGrid's Footer row as a means to add a new record to the DataGrid's underlying data store.11653
XML, the DataSet, and a DataGrid5/29/2002This article, by Scott Mitchell, examines how to display XML data in a DataGrid. Specifically, it shows using the DataSet's ReadXml() method to populate a DataSet with data from an XML store.4156
DataGrids, DataSets, and XML Strings7/17/2002This article, by Anthony Hart, looks at how to allow a user to view data in either one of two formats: as an XML string or in a DataGrid.3804
Highlighting Search Keywords in a DataGrid Web Control7/24/2002This article looks at how to tailor a DataGrid so that its output has certain words highlighted. Such functionality is great if you are using a DataGrid to display search results.4594
Displaying Custom Classes in a DataGrid10/23/2002This article examines how to display the contents of a custom class in a DataGrid. That is, it shows how to build custom classes and then how to bind a collection of these classes to a DataGrid (or any other Data Web Control, for that matter).4301
Transferring the Datagrid Data Between Web Forms5/8/2002This article by Tribikram Rath looks at how to use Server.Transfer() to send a DataGrid from one ASP.NET Web page to another.5023
Creating a Custom DataGridColumn Class10/2/2002This article, by John Dyer, looks at how to create a custom DataGrid column control. Specifically, John's article examines creating a LimitColumn - a DataGrid column that can limit the number of textual characters that appears.4260
Building a Master/Detail DataGrid4/2/2003This article looks at how to build a master/detail DataGrid, where the "master" items are listed in a DataGrid, with each "master" item having a DataGrid in its row showing the set of its "details".21725
Adding a DropDownList Web Control to the DataGrid's Editing Interface8/7/2002If you provide editing capabilities in your DataGrid for a database table with foreign keys, when allowing the user to edit the content you'll likely want to display the legal choices for the foreign key(s) in a DropDownList. This article, by Scott Mitchell and Matthew Rouse examines how to accomplish exactly this!6526
Creating a Fully Editable DataGrid4/18/2003This article, by Joel Gray, shows how to create a DataGrid that is completely editable - that is, each row can be edited instead of only one row being editable at a time.23212
Binding a DataGrid to an ADO Recordset3/28/2003If you have a legacy COM component that returns database information via an ADO component, you may find yourself needing to display the Recordset in a DataGrid. This article, by Eric Neff, looks at how to bind a legacy ADO Recordset to an ASP.NET DataGrid.4466
Retain Scrollback Position After Postback in DataGrid1/15/2003This article, by Donny Mack, looks at how to create a DataGrid that retains its position after a postback occurs.5719
Displaying a Column's Sum in the Footer2/5/2003This article, by Scott Mitchell, looks at how to display the sum of a DataGrid column in the DataGrid's footer. A great technique for displaying summary information about the presented data.5618
Having a Client-Side MessageBox Display When Deleting a Record9/4/2002This article, by Scott Mitchell, examines how to add a bit of client-side JavaScript to a ButtonColumn in the DataGrid. Specifically, Scott's article shows how to provide a client-side confirmation when the user opts to delete a DataGrid row.5377
Top Questions About the DataGrid Web Control1/10/2002This great article contains a list of commonly asked DataGrid questions (and their answers), such as, "How do I create a fully editable DataGrid," and, "How do I add columns dynamically?"15316
Understanding the Differences Among the DataGrid, DataList, and Repeater5/21/2003This article, by Scott Mitchell, examines the similarities and differences among the DataGrid, DataList, and Repeater Web controls. (For those who own a copy of ASP.NET Data Web Controls Kick Start - this material follows along closely with the material presented in Chapter 1, "What Are Data Web Controls?")14520
MouseOver Coloring for a DataGrid12/17/2002This article, by Colt Kwong, demonstrates how to create a DataGrid so that whenever you move the mouse over a DataGrid row, the row's background color changes.15168
Hierarchical Data Binding in ASP.NET7/1/2003This article, by Fritz Onion, uses a very clever use of the data controls, embedding one within the other, to create a nice, cross-browser means of showing hierarchical data.8682
Deciding When to Use the DataGrid, DataList or Repeater7/23/2003Learn about ASP.NET's three controls for displaying data: the DataGrid, the DataList, and the Repeater. Each of these controls has unique traits and associated advantages and disadvantages. When creating an ASP.NET application that displays data, it is important to choose the right control for the job. As we will see in this article, choosing whether to use the DataGrid, DataList, or Repeater is a tradeoff between three factors: usability, development time, and performance.6546
Including Subheadings in a Datagrid7/26/2003This article, by Dave Long, examines how to add subheadings in a DataGrid. This approach allows for data displayed in a DataGrid to be grouped by some means, such as listing all products and grouping them by category. Read on to learn more.7203
Advanced DataGrid Usage11/11/2002This PowerPoint presentation from Microsoft shows how to use the DataGrid Web control to accomplish a number of advanced tasks, such as Master/Detail DataGrids, summary DataGrids, and so on.8552
Summarizing Data with ROLLUP7/30/2003Oftentimes, when building Web-based reporting tools we need to show totals and sub-totals for information stored in the database. This article, by Dave Long, examines using WITH ROLLUP. WITH ROLLUP is syntax that can be used in a SQL query to provide summarized information directly in the database resultset. By the end of this article we will have examined the results produced by a SQL query using WITH ROLLUP, as well as how to display the results of a WITH ROLLUP in a DataGrid.7064
Building a Pageable, Sortable DataGrid8/14/2003Learn how to build a sortable DataGrid and a pageable DataGrid; learn the steps necessary to combine these two techniques into creating a single sortable, pageable DataGrid.6533
DataGrid Made Compliant with Section 508 of the Web Accessibility Initiative Guidelines8/19/2003The DataGrid control that was included with the .NET Framework 1.1 was not compliant with Section 508 of the Rehabilitation Act (www.Section508.gov) or with the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). Data tables that contain two or more rows or columns must identify row and column headers. Microsoft has released a HotFix that you can install that will have DataGrids render according to 508 specifications.5936
Creating Custom Columns for the ASP.NET Datagrid9/10/2003This article, by DataGridGirl herself, examines how to build a custom DataGrid column that displays a databound DropDownList.13544
Creating a Multi-table DataGrid in ASP.NET8/15/2003This article, by Dino Esposito, looks at how to build a DataGrid to display a multi-table DataSet. Of particular interest, Dino shows how to display parent/child hierarchies like the WinForms DataGrid.9240
Common DataGrid Mistakes11/6/2003This article, by the DataGridGirl herself, lists the most common mistakes and blunders developers make when using the DataGrid.17824
Creating a Fully Editable DataGrid12/15/2004Learn how to create a DataGrid where each record in the grid is editable, rather than having to edit one record at a time. Useful for scenarios where the user needs to update a large amount of data at once.13425
Bidirectional Sorting with Up and Down Arrows in the Header6/15/2005This article shows how to create a bi-directional sortable DataGrid that displays an up or down arrow in the header of the column that the grid is sorted by, depending on if the data is sorted in ascending or descending order.9539


Source Code
 
<div style="width:100%; height:300px; overflow:auto;"> 
    <asp:DataGrid id="dgArticles" runat="server" AutoGenerateColumns="False" 
            Font-Size="10pt" Font-Names="Verdana">
       <HeaderStyle font-size="13pt" font-bold="True" 
            horizontalalign="Center" forecolor="White" backcolor="#006699">
       </HeaderStyle> 
    
       <AlternatingItemStyle backcolor="#EEEEEE"></AlternatingItemStyle>
    
       <Columns> 
           <asp:HyperLinkColumn DataNavigateUrlField="ArticleID" 
                  DataNavigateUrlFormatString="/Articles/Goto.aspx?ID={0}"
                  DataTextField="Title" HeaderText="Title">
           </asp:HyperLinkColumn> 
        
           <asp:BoundColumn DataField="DateAuthored" HeaderText="Date Written" 
               DataFormatString="{0:d}"></asp:BoundColumn>

           <asp:BoundColumn DataField="Comments" HeaderText="Comments">
           </asp:BoundColumn>

           <asp:BoundColumn DataField="ClickThroughs" HeaderText="Views" 
                  DataFormatString="{0:d}" ItemStyle-HorizontalAlign="Center"></asp:BoundColumn>
        </Columns> 
    </asp:DataGrid>
</div> 

[Return to the FAQ...]