Webdevelopment Data Grid Dotnet

ASP.NET Reports Starter Kit: Design and Implementation

Vertigo Software, Inc.

November 2002

Summary: This white paper discusses the ASP.NET Reports Starter Kit in depth and provides insight from the perspective of the creators. In addition, the article covers how the reports can be used as a template for building other reports by examining the key application features and implementation technologies. (29 printed pages)

Overview

What is the ASP.NET Reports Starter Kit?

ASP.NET Reports Starter Kit is a guide for creating and publishing customizable web reports using ASP.NET. This guide will show developers how to implement feature rich reports without relying on third party reporting tools. Using eight samples, the Reports Starter Kit presents functional online reports and their equivalent versions optimized for printing. Developers will be able to use these sample reports to build their own reports using these techniques and ASP.NET.

Key features:

* Server control nesting

* Displaying relational data

* Running totals

* Datagrid paging and sorting

* Dynamic image generation with GDI+

* Filtering

* Detail's Drill down

The Reports Starter Kit was developed using both the in-line and code behind coding models. The SDK version was written using the in-line coding model and is optimized for the ASP.NET Web Matrix Project and the .NET Framework SDK. The second version was written using Microsoft ® Visual Studio.NET™ using the code-behind coding model. A C# and VB .NET implementation was created for both the SDK version and the Visual Studio.NET™ version.

Application Flow

The reports home page acts as a selection page for the different reports. The user selects the desired report that they are interested in viewing from this page. This brings them to the report details page where they are presented with the overview of the report and links to more information on the reports, such as working versions, page source, business logic code, and stored procedures. Figure 1 shows the application flow.

Figure 1. Application Flow

The navigation mirrors the approach taken for the ASP.NET Store Starter Kit Documentation, where the detail information is presented in a frame below the navigation area at the top. This will be explained in depth later in this whitepaper.

Home page

The Reports home page describes the eight basic reports with their iconic representation and lists features that the each report demonstrates. This allows developers to look for either a specific layout example or an example for a technical issue they are looking to solve. The user can select a report by clicking on the report name or icon, which will bring them to the report details page.

Figure 2 shows the report home page.

Figure 2. ASP.NET Reports Home page

Report Details page

The details page is divided into two frames. The top frame is the navigation and the bottom frame is the content.

The highlighted area in the image below is the navigational frame. It has links for the overview, live and printable versions, page source, business logic layer, and stored procedures. The bottom frame changes according to the link the user clicks in the navigational frame.

Users can click on the "Reports Overview" link to return to the overview page.

Figure 3. Tabular Report Details

The Sample Reports

Tabular Report

The tabular report shows a basic way of grouping related data (in this case, grouping products by category). The grouping is done by nesting a DataGrid control inside of a DataList control. Figure 4 shows how the DataList and the DataGrid work in tandem. The DataList displays the category name and summary information, while the DataGrid returns the products details based on the Category ID passed in from the DataList for each category.

Figure 4. DataList and DataGrid interaction

The DataList's data source is a TabularReportCollection returned from the GetHeader function. To correlate each category with its details, the DataGrid's data source is assigned dynamically by calling the GetDetails function for each category as the DataList is binding.

Furthermore, this report demonstrates how to implement sorting on the DataGrid Server Control. For this report, sorting is enabled for each column in the Product Details header, except for the Quantity per Unit and Extended Price columns. The sortable columns can be sorted in ascending or descending order. To indicate what has been selected, the Sortable columns are displayed as red and underlined when the user hovers the mouse pointer over the column header.

Figure 5. DataGrid sorting

Sorting is a simple task to implement with ASP.NET. The DataGrid's AllowSorting property is set to True and an event handler for the sorting is added to the DataGrid. The event handler then catches the sorting criteria where it is used to sort the appropriate DataGrid column.

private void SortGridData(TabularReportCollection list,

string sortField, bool asc)

{

TabularReportCollection.TabularReportFields sortCol =

TabularReportCollection.TabularReportFields.InitValue;

switch(sortField)

{

case "ProductName":

sortCol