 reporting_kit_conversion_demo.zip
 reports
- bin
 ASPNETReports.dll- ASPNETReports.dll.bak
- MySql.Data.dll
- MySql.Data.Tests.dll
 MySql.Data.xml
- ChartGenerator.aspx
- components
- crosstab.aspx
- default.aspx
- docs
- drilldown.aspx
- Global.asax
- hierarchical.aspx
- images
 1x1.gif- asp.net-reports.gif
- background.gif
- crosstab.gif
- crosstabnestedcontrols.png
- crosstabtotals.png
- customers.gif
- drilldown.gif
- drilldownnestedcontrols.png
- employees.gif
- getorderdetails.gif
- GetOrders.gif
- grid_background.gif
- hierarchal.gif
- hierarchical.gif
- hierarchicalpaging.gif
- hierarchicalreport.gif
- hierarchicalschema.gif
- hierarchicalsorting.gif
- logo.gif
- logo-neg.gif
- masterdetail.gif
- masterdetaildetails.png
- masterdetails.gif
- masterdetailsummary.png
- masterdetailtables.png
- matrix.gif
- querysample.gif
- querysample2.gif
- reporting.gif
- report-table-bg.gif
- simple.gif
- simpleoverview.png
- simplesp.png
- spacer.gif
- tabcolorcode.png
- tabdetail.png
- tabheader.gif
- tabheader.png
- tabnestedcontrols.png
- tabsortshot.png
- tabular.gif
- tabularcolorcode.png
- tabularextendedprice.png
- tabularsorting.png
- text.gif
- textalternate.gif
- textreport.gif
- textshot.gif
- viscategorysales.gif
- viscategorysales.png
- vischartstructure.png
- visual.gif
- xtabsql.png
- masterdetail.aspx
 scripts.js- simplereport.aspx
- sourceviewer
- 1x1.gif
- crosstab.src
- drilldown.src
- grid_background.gif
- hierarchical.src
- masterdetail.src
- simple.src
- srcview.aspx
 style.css- tabular.src
- tabview.aspx
- textreport.src
- visual.src
- sql
- styles.css
- stylesPrint.css
- tabular.aspx
- textreport.aspx
- visual.aspx
- web.config
|
<html>
<head>
<title>ASP.NET Reports Starter Kit Documentation</title>
<link href="../style.css" type="text/css" rel="stylesheet">
</head>
<body class="NormalIndent">
<h1>
Tabular Report
</h1>
<p>
<b>Description:</b> The tabular report displays a list of
products grouped by product category.
</p>
<p>
<strong>Overview:</strong> 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.
</p>
<p>
Additionally, this report demonstrates how to implement interactive sorting
using the DataGrid Server Control.
</p>
<p>
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. Sortable
columns are displayed as red and underlined when the user hovers over the
column header.
</p>
<p>
<img src="/reports/images/1x1.gif" width="25"> <img src="/reports/images/tabularsorting.png">
</p>
<p>
In addition to sorting, the DataGrid also features the ability to selectively
control the formatting of a row based on custom criteria. In this case,
Products which are out of stock (designated with a quantity of zero) will be
displayed inred.
</p>
<p>
<img src="/reports/images/1x1.gif" width="25"> <img src="/reports/images/tabularcolorcode.png">
</p>
<p>The extended price is calculated as the Datagrid is data binding. It is
displayed as the right most column.</p>
<p>
<img src="/reports/images/1x1.gif" width="25"> <img src="/reports/images/tabularextendedprice.png">
</p>
<p>
<strong>Implementation Notes: </strong> To group the related data,
a DataGrid control is nested inside of a DataList control. In this case,
DataGrid is chosen for it's ability to implement sorting and to
examine its data source during runtime.
</p>
<p>
<img src="/reports/images/1x1.gif" width="25"> <img src="/reports/images/tabnestedcontrols.png">
</p>
<p>
The above diagram 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.
</p>
<p>
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.
</p>
<pre>
<asp:datagrid id=Datagrid1 runat="server"
<font color=blue>DataSource='<%# GetDetails((int)DataBinder.Eval(Container.DataItem, "CategoryID")) %>'</font> ... >
</pre>
<p>
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.
</p>
<pre>
<asp:datagrid id=Datagrid1 runat="server" ... <font color=blue>AllowSorting="true" OnSortCommand="SortGrid"</font>>
</pre>
<pre>
private void SortGridData(TabularReportCollection list, string sortField, bool asc)
{
TabularReportCollection.TabularReportFields sortCol =
TabularReportCollection.TabularReportFields.InitValue;
switch(sortField)
{
case "ProductName":
sortCol = TabularReportCollection.TabularReportFields.ProductName;
break;
case "UnitPrice":
sortCol = TabularReportCollection.TabularReportFields.UnitPrice;
break;
case "UnitsInStock":
sortCol = TabularReportCollection.TabularReportFields.UnitsInStock;
break;
}
list.Sort(sortCol, asc);
}
</pre>
<pre>
public void Sort(TabularReportFields sortField, bool isAscending)
{
switch (sortField)
{
case TabularReportFields.ProductName:
base.Sort(new ProductNameComparer());
break;
case TabularReportFields.UnitsInStock:
base.Sort(new UnitsInStockComparer());
break;
case TabularReportFields.UnitPrice:
base.Sort(new UnitPriceComparer());
break;
}
if (!isAscending) base.Reverse();
}
</pre>
<p>
The color coding is done by checking the units in stock as the inner DataGrid
databind and changing the style class for that line item.
</p>
<pre>
// if there are no units in stock, color the line item as red by changing the style class
if (unitsInStock == 0)
e.Item.CssClass = "OutOfStock";
</pre>
<p>The OutOfStock style used above is defined in the styles.css file.</p>
<pre>
.OutOfStock
{
color: red;
}
</pre>
<p>To calculate the extended, an event handler is added to the OnItemDataBound
event of the Datagrid. It retrieves the unit price and multiplies that to the
units in stock to calculate the extended price of a product.</p>
<pre>
protected void CalculateExtendedPrice(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
double unitsInStock = Convert.ToDouble(e.Item.Cells[1].Text);
double unitPrice = Convert.ToDouble(e.Item.Cells[4].Text);
e.Item.Cells[5].Text = string.Format("{0:c}", unitPrice * unitsInStock);
// format unit price column as currency
e.Item.Cells[4].Text = string.Format("{0:c}", unitPrice);
...
}
}
</pre>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.
A list of licenses authors might use can be found here
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.
Submit an article or tip