Reports, Tables, and Graphs:.NET Reporting in Autodesk MapGuide Toby Jutras

Transcription

1 December 2-5, 2003 MGM Grand Hotel Las Vegas Reports, Tables, and Graphs:.NET Reporting in Autodesk MapGuide Toby Jutras GI42-2 In this session, we will explore Microsoft's ASP.NET technology for reporting in Autodesk MapGuide. We'll discuss standard DataGrid controls as well as third-party controls for charts and graphs. About the Speaker: Toby is a senior applications engineer with Autodesk, specializing in Civil Engineering Solutions products. Toby regularly presents at seminars and technical workshops. His understanding of the construction, civil engineering, and surveying fields comes from 10 years of experience working on engineering projects in New England. Toby has been the lead designer on a wide array of project types, including highway interchanges, fuel storage facilities, and retail/residential projects. toby.jutras@autodesk.com

2

3 Table of Contents PRESENTATION OVERVIEW...4 PRESENTATION GOALS & OBJECTIVES...4 SCOPE OF THESE MATERIALS...4 SYSTEM PREPARATION...4 SOURCE CODE AVAILABILITY...4 ABOUT THE REPORTS...5 ABOUT THE SAMPLE PROJECT...5 BASIC ASP.NET DATAGRID REPORTS...6 ASP.NET BASIC REPORT...6 PREREQUISITES FOR A MAPGUIDE REPORT...8 Preparing Layers for Reporting...8 How MapGuide Reporting Works...9 Other ASP.NET Reporting Techniques...9 The ASP.NET HttpRequest Class...9 SIMPLE ASP.NET MAPGUIDE REPORT...10 REPORTS THAT ADD RECORDS TO A DATABASE...12 SORTING DATAGRIDS...13 BASIC SORTING EXAMPLE WITHOUT MAPGUIDE...13 ADDING MAPGUIDE TO THE EQUATION...14 Storing OBJ_KEYS in a ViewState...15 Alternate Method of Initiating the Report...15 THE MAPGUIDE VERSION OF THE SORTABLE DATAGRID...16 PAGING DATAGRIDS...18 PROVIDING PAGING & SORTING...18 EDITING DATAGRIDS...21 SELECTION IN DATAGRIDS...25 ADDING CLIENT SIDE CODE TO A SERVER CONTROL...25 THE ZOOMTO() FUNCTION...27 CREATING A CHART...28 WHAT IF I DON T WANT A DATAGRID?...29 CONCLUSION...31 REFERENCES

4 Presentation Overview Presentation Goals & Objectives The objective for this document is to introduce the reader to necessary concepts and tools to create ASP.NET based reports from MapGuide, including an overview of how a MapGuide report communicates to the corresponding web page. At the conclusion of this paper, the reader should be able to create a list type report, a simple tabular report, and a chart using a 3 rd party.net component. Scope of These Materials This document will cover how to create basic ASP.NET reports that interface with Autodesk MapGuide. In addition to the basic reports, we will explore strategies for creating reports that work both with form action, as well as with encoded URLs. Some of the more advanced topics will include how to add client side code to our web reports that can interact with the MapGuide ActiveX control, and editing data in DataGrid controls. System Preparation In order to follow along with this document, you will need to obtain a.net web authoring tool, the.net Framework SDK 1.1, and ensure that you have Internet Information Server running on your system. Pre-requisites are: Install & Configure Microsoft s Internet Information Server Install Microsoft Visual Studio.NET 2003 (or Download & Install ASP Web Matrix) Downloading & Install the.net Framework SDK 1.1 Source Code Availability Rather than provide written copies of code, this paper is intended to be a companion to a web site which hosts all of the code for this project. You can find the link by visiting the Autodesk ISD AE web site at: Once at the site, look for the link to Maplewood - ASP.NET Sample. Once there, select the Autodesk University Code Samples link at the top of the page. Each report can be executed against the Autodesk University layer in MapGuide. The corresponding code examples are available by simply selecting on the ASPX icon beneath each report. Other features and reports may only be available with other layers selected. 4

5 About the Reports Creating ASP.NET pages is not that much different than creating standalone ASP.NET pages. Typically, only simple modifications are required to the SQL Query, to ensure data related to the highlighted objects is displayed. Although ADO.NET (the technology we ll use to connect to the database) supports many different providers, such as SQL Server, ODBC, and Oracle the featured application uses the OleDb provider for working with the Microsoft Access parcels database on this project. Changing only a few lines in each of the examples will allow you to work with any of the other providers very easily. In the beginning of each section, we will create ASP.NET pages that simply display data from the database independent of MapGuide. Each report section will also contain a series of MapGuide focused reports. In some cases, there will be more than one MapGuide report. If that is the case, typically making the simple modifications to the generic report for MapGuide compatibility don t result in the desired results. In those cases additional changes were made in the subsequent reports. About the Sample Project The sample project being used for this session is the Maplewood Subdivision project in Southern New Hampshire. This example represents a proof of concept for a residential home sales application that you might see at a kiosk in the model home of a development. 5

6 Basic ASP.NET DataGrid Reports In this first section, we will explore the most simple of reports. We simply want to display all of our database records in a given table, and create an HTML table from them. In addition to providing the most basic of reports, we will use the most basic connection option that ADO.NET affords us using a simple data reader. ASP.NET Basic Report The report in listing 1.1 creates a very basic table with no special formatting options. The output from that code can be seen in picture below. <%@ Page Language="VB" %> <%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.OleDb" %> <HTML> <HEAD> <script runat="server"> Sub Page_Load(sender as Object, e as EventArgs) Dim ConnectionString As String = "PROVIDER=Microsoft.Jet.OLEDB.4.0; &_ DATA SOURCE=C:\MapGuide Projects\Maplewood Sales\dbf\MaplewoodSales.mdb;" Dim CommandText As String = "select * from qryparceldata" Dim myconnection As New OleDbConnection(ConnectionString) Dim mycommand As New OleDbCommand(CommandText, myconnection) myconnection.open() dgparceldata.datasource = mycommand.executereader(commandbehavior.closeconnection) dgparceldata.databind() myconnection.close() </script> </HEAD> <body> <form runat="server"> <asp:datagrid id="dgparceldata" runat="server"></asp:datagrid> </form> </body> </HTML> Let s take a look at the code in listing 1.1 one line at a time. Code Listing 1.1 You will generally see the following 3 lines in the remainder of our examples. The first line specifies the default language that the scripting will be written in. Connecting to an OleDb database will require a reference to two.net Framework classes. System.Data is a generic class, while the System.Data.OleDb provides support specific to working with our Microsoft Access databases. <%@ Page Language="VB" %> <%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.OleDb" %> After the imports are declared, the next few lines 6

7 of the document start the HTML and HEAD section of the document. The next point of interest is the following line, which begins the block of server side code that will eventually create our dynamic web page. <script runat="server"> Next comes the part of the code that gets interesting. There is an event that takes place every time the web page is loaded. The event takes place on the server, and any code that executes inside that Page_Load event will affect how the page is delivered to the web browser that called the page. In this example, we are leveraging this Page_Load event to connect to our database, and fill our DataGrid control. The Page_Load function is shown below, with code omitted for brevity. <script runat="server"> Sub Page_Load(sender as Object, e as EventArgs) Code goes here </script> Now, let s take a look at the contents of the Page_Load sub that is responsible for connecting to our database. In the examples in this project, we will be using ADO.NET to make our connections to the database. Before we explore the ADO.NET objects, we need to define a couple of prerequisites. The first 2 lines represent the connection string to our datasource. Later we will explore some alternatives that make the web site a bit more portable than hard coding paths in each of our pages, but this simple example will suffice for now. The third line of the code listing is our SQL query that will be executed against our data source. Later we will see how this can be easily modified to show information on only the objects MapGuide has selected. Dim ConnectionString As String = "PROVIDER=Microsoft.Jet.OLEDB.4.0; &_ DATA SOURCE=C:\MapGuide Projects\Maplewood Sales\dbf\MaplewoodSales.mdb;" Dim CommandText As String = "select * from qryparceldata" The first line in the snippet below creates a new ADO.NET connection object using the connection string defined above. The second line creates a new command object by executing the SQL query against the newly defined connection object. Finally, the third line of the snippet opens the connection, and makes it available. Dim myconnection As New OleDbConnection(ConnectionString) Dim mycommand As New OleDbCommand(CommandText, myconnection) myconnection.open() There is quite a lot going on in the next two lines of code. In the first line, we are setting the DataGrid s (more on that in a moment) datasource property to a data reader that has been filled with data from our command object created above. Although we could instantiate the data reader, and use it for multiple data controls on our web site, there is no need in this example Finally the second line binds the data to the DataGrid control. dgparceldata.datasource = mycommand.executereader(commandbehavior.closeconnection) dgparceldata.databind() 7

8 Finally, when we are done using the connection, it is a good idea to close it. If you don t, it will eventually be closed for you, but that can create inefficiencies. Remember that on a busy site, many of these objects may be created on the server, and cleaning up after ourselves will only improve performance. myconnection.close() The next few lines of code represent the body of the HTML page. Specifically there is a form with a single server control called the DataGrid. The DataGrid control will be replaced with the appropriate HTML code to represent our data in an HTML table before it is delivered to the web browser that requested the page. <body> <form runat="server"> <asp:datagrid id="dgparceldata" runat="server"></asp:datagrid> </form> </body> With our first report completed, we can take a look at how to modify the code so that it can interact with the MapGuide application Prerequisites for a MapGuide Report Before we can modify our reports to work with MapGuide, we first need to understand how MapGuide passes information to our reports. Preparing Layers for Reporting When we create a layer in MapGuide, one of the items we specify about our Data Source is the Key Column, which serves as the primary key for our data source. This key is what correlates our graphical data with any reports we decide to make. In the application example for this project, our Key Column is consistent with the Parcel_Name column in our Parcels database. It would simply be a matter of modifying our first ASP.NET report to use an SQL query that would only select the objects that MapGuide has highlighted. 8

9 How MapGuide Reporting Works The most simple of reports consists of a URL that represents the web page that will display our data, and the parameter that will be passed to the report. The end result is very similar to the web form shown below: <form action="employee.aspx" method="post" target="bottom"> Search by Employee ID<br> <input type="text" name="obj_keys" /> <input type="submit" value="find" /> </form> The report generates a HTTP request that includes data about what features in MapGuide are selected. That data is encoded in the HTTP header, and can be extracted by our web page. To gather the appropriate data from our database that correlates to the selected items in MapGuide, we could modify our SQL query to request the data from the calling form, or harvest it from the HTTP header. See the modified query below: qry = "select * from qryparceldata where [Parcel_Name] IN (" & Request.Form("OBJ_KEYS") & ")" Not having prior web development experience, one of the things that troubled me was the semantics of how MapGuide passed the key information. To help me more clearly understand this process, I ran a simple report that showed all of the information that gets passed in an HTTP request. Other ASP.NET Reporting Techniques In addition to encoding parameters in an HTTP header, many reports are created are created by altering the URL to include a query string. One big advantage with this method is that you don t have to submit a form, making it easier to launch custom reports in a variety of methods. An example of a calling URL, and the modified query can be seen below: qry = "select * from qryparceldata where [Parcel_Name] IN (" & Request.QueryString("OBJ_KEYS") & ")" The ASP.NET HttpRequest Class The HttpRequest class is a smart object, and can actually help us deal with both form encoding, and querystring encoding. See the modified query below: qry = "select * from qryparceldata where [Parcel_Name] IN (" & Request("OBJ_KEYS") & ")" By simply using Request, if the key OBJ_KEYS exists in any of the HttpRequest collections, it will be returned. This ensures that any reports we create can be repurposed as a MapGuide report, or a simple web report. The only thing to keep in mind regarding this desired interoperability between reports is to keep the key names consistent. 9

10 Simple ASP.NET MapGuide Report Our first MapGuide report is a derivative of the last report with three major changes: 1. A stylesheet is used to control formatting of the document 2. The report accepts either a querystring encoded in the URL, or the HTTP header 3. The Page_Load event handler has been stripped down a bit for clarity Aside from those simple changes, the report hasn t changed that much. <%@ Page Language="VB" %> <%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.OleDb" %> <HTML> <HEAD> <LINK title="style" href="../styles.css" type="text/css" rel="stylesheet"> <script runat="server"> ' Insert page code here Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then BindData() End If Sub BindData() Dim CommandText As String = "select * from qryparceldata where [Parcel_Name] IN (" & _ Request("OBJ_KEYS") & ")" Dim myconnection As New OleDbConnection(ConfigurationSettings.AppSettings("connString")) Dim mycommand As New OleDbCommand(CommandText, myconnection) myconnection.open() dgparceldata.datasource = mycommand.executereader(commandbehavior.closeconnection) dgparceldata.databind() End sub </script> </HEAD> <body> <form runat="server"> <asp:datagrid id="dgparceldata" runat="server" Width=100%> <HeaderStyle CssClass="bluebold"></HeaderStyle> <AlternatingItemStyle CssClass="greybackground"></AlternatingItemStyle> <ItemStyle CssClass="whitebold"></ItemStyle> </asp:datagrid> </form> </body> </HTML> Let s first take a look at the new Page_Load event handler. As we begin to add features to our reports that include buttons for selecting, sorting, and other tasks, it will become important to place our code within an If statement that ensures we only query the datasource, and bind our DataGrid on our first visit to the report. Because our reports will eventually include more features, it is a good idea to use a separate function for binding to the datasource. This will ensure that the code remains more readable, and keep our Sub a more digestible size. Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then BindData() End If 10

11 When the report is run, you can see that the rows returned by the report are in synchronization with the items that have been selected. Because we took the time to create our report using the Request(OBJ_KEYS) function you can see that the same report that was placed in the report frame of my MapGuide application, can also be used independent of MapGuide. It should be pointed out, however that there are consequences for taking this easy way out. It causes ASP.NET to search all collections for the specified key It creates ambiguity in your code, making it more difficult to read and debug. In spite of these concerns, I believe that there is still significant advantage to using this method. Simply put, I can eliminate one report page by generalizing the way in which the report can be called. Now instead of two reports that appear the same, but are called differently I can have a single report that responds to both types of request. In reality, this decreases the total amount of code to be managed in a given application. In order to alleviate the ambiguity, a comment can be made in the code to describe why a specific collection within the HttpReqeust class was not specified. 11

12 Reports that Add Records to a Database When we think of reports, we generally think of getting information returned to us, but MapGuide also includes a different type of report that allows us to record the location of an on-screen selection. The key to this, is creating a report of the type Digitize a point and send point. This report type, when run, will prompt the user to select a point on the screen, and then those coordinates are sent to the URL. In this simple example, the Home Styles MapGuide layer is generating points based on the same table that records are appended to. As new items are added to the database, they are reflected on the screen the next time the map is refreshed. The report that we used for this example is overly simple, and doesn t even have any MapGuide code! It simply appends the record to the database. <%@ import Namespace="System.Data.OleDb" %> <%@ import Namespace="System.Data" %> <%@ Page Language="VB" %> <HTML> <HEAD> <LINK title="style" href="../styles.css" type="text/css" rel="stylesheet"> <script runat="server"> ' Insert page code here Sub Page_Load(sender as Object, e as EventArgs) Dim CommandText As String = "INSERT INTO AddDataFromMapGuide (LAT,LON) VALUES (" & _ Request("LAT") & "," & Request("LON") & ")" Dim myconnection As New OleDbConnection(ConfigurationSettings.AppSettings("connString")) Dim mycommand As New OleDbCommand(CommandText, myconnection) myconnection.open() mycommand.executereader(commandbehavior.closeconnection) Message.Text = "Lat: "& Request("LAT") & "<BR/>Lat: "& Request("LON") </script> </HEAD> <body> <form runat="server" ID="Form1"> <asp:label id="message" runat="server"></asp:label> </form> </body> </HTML> While not fancy, it does demonstrate the point. To improve the usefulness of this report, you may consider adding some code to automatically referesh the MapGuide window after points have been added. 12

13 Sorting DataGrids The next step in the evolution of our reports is to begin adding some user interaction within our reports. Specifically, this segment will explore the subject of sorting our reports by providing a hyperlink as the header for each column. When a user selects on the column heading, the report is re-rendered with the values sorted by that field in the database. Basic Sorting Example without MapGuide If we were simply creating ASP.NET reports without concern for MapGuide, this would be only a minor increment from our previous examples. The updated code listing below, demonstrates the changes required to introduce sorting to our basic example from the previous section. <%@ Page Language="VB" %> <%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.OleDb" %> <HTML> <HEAD> <LINK title="style" href="../styles.css" type="text/css" rel="stylesheet"> <script runat="server"> ' Insert page code here Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then BindData("Parcel_Name") End If Sub BindData(SortFieldName as String) Dim myconnection As New OleDbConnection(ConfigurationSettings.AppSettings("connString")) Dim CommandText As String = "SELECT * FROM qryparceldata ORDER BY " & SortFieldName Dim mycommand As New OleDbCommand(CommandText, myconnection) myconnection.open() dgparceldata.datasource = mycommand.executereader(commandbehavior.closeconnection) dgparceldata.databind() End sub Sub SortDataGrid(sender as Object, e as DataGridSortCommandEventArgs) BindData(e.SortExpression) </script> </HEAD> <body> <form runat="server"> <asp:datagrid id="dgparceldata" runat="server" AllowSorting=True OnSortCommand="SortDataGrid"> <HeaderStyle CssClass="bluebold"></HeaderStyle> <AlternatingItemStyle CssClass="greybackground"></AlternatingItemStyle> <ItemStyle CssClass="whitebold"></ItemStyle> </asp:datagrid> </form> </body> </HTML> One of the first things we notice is that the BindData() function includes a parameter for which column the data needs to be sorted by. The call to the BindData() function includes the default sort parameter of Parcel_Name when the page is first loaded. 13

14 Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then BindData("Parcel_Name") End If The next code segment shows the BindData() function, and how that data is used to provide the desired sorting. The functional component of this is the modified SQL query that uses the ORDER BY statement to provide the appropriate sort order based on the variable that is passed to the function. Sub BindData(SortFieldName as String) Dim myconnection As New OleDbConnection(ConfigurationSettings.AppSettings("connString")) Dim CommandText As String = "SELECT * FROM qryparceldata ORDER BY " & SortFieldName Dim mycommand As New OleDbCommand(CommandText, myconnection) myconnection.open() dgparceldata.datasource = mycommand.executereader(commandbehavior.closeconnection) dgparceldata.databind() End sub The last bit of new code is an event handler for the DataGrid that gets run every time someone selects a column header. As you can see, the DataGrid returns the arguments to the event, which include the SortExpression. Simply by calling the DataBind() function with the appropriate column information, we get the desired sorting in our DataGrid. Sub SortDataGrid(sender as Object, e as DataGridSortCommandEventArgs) BindData(e.SortExpression) Lastly, lets take a look at the updated DataGrid definition. You can see in the snippet below, that sorting has been enabled, and when the sort action takes place, the function SortDataGrid() will be run. <asp:datagrid id="dgparceldata" runat="server" AllowSorting=True OnSortCommand="SortDataGrid"> Adding MapGuide to the Equation Based on our experience with modifying the previous example, we would expect that we could simply replace the line: Dim CommandText As String = "SELECT * FROM qryparceldata ORDER BY " & SortFieldName With: Dim CommandText As String = "SELECT * FROM qryparceldata where [Parcel_Name] IN (" & _ Request("OBJ_KEYS") & ") ORDER BY " & SortFieldName The problem is that MapGuide sends the OBJ_KEYS as part of the HTTP header, and they disappear after the page is reloaded. This means that the SQL query fails as Request("OBJ_KEYS") does not resolve to anything. There are basically two ways to handle this problem: Store the OBJ_KEYS in a ViewState Devise an alternate method of initiating the report that incorporates the OBJ_KEYS in the URL 14

15 Both alternatives are fairly easy to implement, and each has their advantage. Storing OBJ_KEYS in a ViewState The ViewState is a property of the Page class in ASP.NET, and provides a great place to store page specific data that needs to persist after the page is posted back. In the example below, you can see that a ViewState was created to store the OBJ_KEYS. Since that code resides within our If statement it is only run when the page is first viewed. Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then ViewState("OBJ_KEY") = Request("OBJ_KEYS") BindData("Parcel_Name") End If Every subsequent time we view the page the ViewState holding our value is used in the SQL query. CommandText = "SELECT * FROM qryparceldata where [Parcel_Name] IN (" & _ ViewState("OBJ_KEY") & ") ORDER BY " & SortFieldName The primary advantage of using this technique is that you can still use the MapGuide report engine to trigger this report. This should become your default way in which to interact with MapGuide, ensuring that if you trigger a post back, your query/page will still be valid. Alternate Method of Initiating the Report Another way to handle this problem is by launching the report using a custom script. The script is fairly straight forward. Instead of using the toolbar or pop up menu, this type of report needs to be launched via a button or hyperlink with an onclick event. onclick="getcustomreport('2o-mgadvancedsort.aspx', 'Autodesk University')" The function simply gets a listing of selected keys, and appends it to the URL so that it can be decoded by the report. function getcustomreport(reporturl, layername) { var map = getmap(); if (map.getselection().getnumobjects() == 0) { alert ("Please make a selection first."); return; } var sel = map.getselection(); var keys = sel.getasstring(layername,"'"); window.open(reporturl + '?OBJ_KEYS=' + keys, 'reports'); } Although not as elegant as the ViewState, this may prove to be a valuable alternative when you need to repurpose an existing report to work with MapGuide. 15

16 The MapGuide Version of the Sortable DataGrid The listing below represents our sortable MapGuide report, with a few improvements. <%@ Page Language="VB" %> <%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.OleDb" %> <HTML> <HEAD> <LINK title="style" href="../styles.css" type="text/css" rel="stylesheet"> <script runat="server"> ' Insert page code here Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then ViewState("OBJ_KEY")=Request("OBJ_KEYS") ViewState("SortExpression") = "Phase" ViewState("SortDirection")="ASC" BindData(ViewState("SortExpression") & " " & ViewState("SortDirection")) End If Sub BindData(SortField as String) '1. Create a connection to the database Dim myconnection As New OleDbConnection(ConfigurationSettings.AppSettings("connString")) '2. Create a command object for the query Dim CommandText As String = "SELECT * FROM qryparceldata where [Parcel_Name] IN (" & _ ViewState("OBJ_KEY") & ") ORDER BY " & SortField Dim mycommand As New OleDbCommand(CommandText, myconnection) myconnection.open() '3. Specify the the datasource, and bind dgparceldata.datasource = mycommand.executereader(commandbehavior.closeconnection) dgparceldata.databind() End sub Sub SortDataGrid(sender as Object, e as DataGridSortCommandEventArgs) ViewState("SortExpression") = e.sortexpression BindData(ViewState("SortExpression") & " " & ViewState("SortDirection")) SwapDirection() Sub SwapDirection() If ViewState("SortDirection") = "ASC" then ViewState("SortDirection") = "DESC" Else ViewState("SortDirection") = "ASC" End If </script> </HEAD> <body> <form runat="server" ID="Form1"> <asp:datagrid id="dgparceldata" runat="server" AllowSorting="True" OnSortCommand="SortDataGrid" AutoGenerateColumns="False" Width="100%"> <HeaderStyle CssClass="bluebold"></HeaderStyle> <AlternatingItemStyle CssClass="greybackground"></AlternatingItemStyle> <ItemStyle CssClass="whitebold"></ItemStyle> <Columns> <asp:boundcolumn DataField="Phase" HeaderText="Phase" SortExpression="Phase"></asp:BoundColumn> <asp:boundcolumn DataField="Status" HeaderText="Status" SortExpression="Status"></asp:BoundColumn> <asp:boundcolumn DataField="Parcel_Name" HeaderText="Parcel Name"></asp:BoundColumn> <asp:boundcolumn DataField="Area_SF" HeaderText="Area (SF)" SortExpression="Area_SF"></asp:BoundColumn> </Columns> </asp:datagrid> </form> </body> </HTML> 16

17 Let s take a few minutes to review some of the highlighted sections Our Page_Load event handler has grown a bit since the last report. This time, we will be taking advantage of the ViewStates discussed earlier to hold our list of keys that make our report correlate to what MapGuide has selected. We will also be using the ViewStates to remember what the sort direction, and sort order are as well. When we load our page for the first time, we need to set all of these values to. Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then ViewState("OBJ_KEY")=Request("OBJ_KEYS") ViewState("SortExpression") = "Phase" ViewState("SortDirection")="ASC" BindData(ViewState("SortExpression") & " " & ViewState("SortDirection")) End If Next, we needed to modify our SQL query. Notice that we reference the ViewState("OBJ_KEY") to gather the appropriate keys from MapGuide. Also, the string variable SortField is passed from the calling statement, and determines the order in which the records are sorted. Sub BindData(SortField as String) omitted for brevity Dim CommandText As String = "SELECT * FROM qryparceldata where [Parcel_Name] IN (" & _ ViewState("OBJ_KEY") & ") ORDER BY " & SortField omitted for brevity End sub The SortDataGrid() function is the event handler that is triggered when someone selects on one of the column headers. The function first sets the ViewState("SortExpression") to the new value of the sort, received as a property of the DataGridSortCommandEventArgs. Next, the DataGrid is rebound, using the new sort expression, and direction. The last thing we do is to swap the direction of the sort, by calling SwapDirection(). Sub SortDataGrid(sender as Object, e as DataGridSortCommandEventArgs) ViewState("SortExpression") = e.sortexpression BindData(ViewState("SortExpression") & " " & ViewState("SortDirection")) SwapDirection() The last segment of code to review, is the SwapDirection() function. This function checks to see if the sort is ascending, and if it is, changes it to descending. Otherwise it changes it to ascending. This gives us the ability to invert our sorts by clicking on the same header a second time. Sub SwapDirection() If ViewState("SortDirection") = "ASC" then ViewState("SortDirection") = "DESC" Else ViewState("SortDirection") = "ASC" End If 17

18 Paging DataGrids In the examples we have seen thus far, the report data was shown in the lower frame of our application window. In some cases, where we ve selected more items than can appear in that window, we ve had to scroll to see all the information. You can imagine that with a large number of records, it may be preferable to use Next/Back buttons to move between pages of information. Providing Paging & Sorting The two major changes from our last example are the need to use a DataSet in place of the DataReader we have been using, and adding the appropriate code to manage the paging operations. The reason for using a DataSet in place of the DataReader is that when using default paging, the DataSource bound to the DataGrid must implement the ICollection interface. The DataSet implements this interface, while the DataReader does not. An alternative to using a DataSet for the DataSource would be to implement custom paging, but that introduces other challenges. Adding the paging functionality is not unlike adding the sorting functionality in the previous example. Some minor changes are made to the DataGrid to handle the paging events, and to control the number of items on a given page. The paging code needs to be added, and the sorting code needs to be updated to go back to the first page after a sort. 18

19 import Namespace="System.Data.OleDb" %> import Namespace="System.Data" %> Page Language="VB" %> <HTML> <HEAD> <LINK title="style" href="../styles.css" type="text/css" rel="stylesheet"> <script runat="server"> Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then ViewState("OBJ_KEY")=Request("OBJ_KEYS") ViewState("SortExpression") = "Phase" ViewState("SortDirection")="ASC" BindData(ViewState("SortExpression") & " " & ViewState("SortDirection")) End If Sub BindData(SortField as String) Dim myconnection As New OleDbConnection(ConfigurationSettings.AppSettings("connString")) Dim CommandText As String = "SELECT * FROM qryparceldata where [Parcel_Name] IN (" & _ ViewState("OBJ_KEY") & ") ORDER BY " & SortField Dim mycommand As New OleDbCommand(CommandText, myconnection) myconnection.open() Dim daparceldata as new OleDbDataAdapter() daparceldata.selectcommand = mycommand Dim dsparceldata as New DataSet() daparceldata.fill(dsparceldata, "qryparceldata") myconnection.close() dgparceldata.datasource = dsparceldata dgparceldata.databind() End sub Sub SortDataGrid(sender as Object, e as DataGridSortCommandEventArgs) ViewState("SortExpression") = e.sortexpression dgparceldata.currentpageindex = 0 BindData(ViewState("SortExpression") & " " & ViewState("SortDirection")) SwapDirection() Sub SwapDirection() If ViewState("SortDirection") = "ASC" then ViewState("SortDirection") = "DESC" Else ViewState("SortDirection") = "ASC" End If Sub PageDataGrid(sender as Object, e as DataGridPageChangedEventArgs) dgparceldata.currentpageindex=e.newpageindex BindData(ViewState("SortExpression") & " " & ViewState("SortDirection")) </script> </HEAD> <body> <form runat="server" ID="Form1"> <asp:datagrid id="dgparceldata" runat="server" AllowSorting="True" OnSortCommand="SortDataGrid" AllowPaging="True" OnPageIndexChanged="PageDataGrid" AutoGenerateColumns="False" Width="100%" PageSize="8"> <HeaderStyle CssClass="bluebold"></HeaderStyle> <AlternatingItemStyle CssClass="greybackground"></AlternatingItemStyle> <ItemStyle CssClass="whitebold"></ItemStyle> <Columns> <asp:boundcolumn DataField="Phase" SortExpression="Phase" HeaderText="Phase"></asp:BoundColumn> <asp:boundcolumn DataField="Status" SortExpression="Status" HeaderText="Status"></asp:BoundColumn> <asp:boundcolumn DataField="Parcel_Name" HeaderText="Parcel Name"></asp:BoundColumn> <asp:boundcolumn DataField="Area_SF" SortExpression="Area_SF" HeaderText="Area (SF)"></asp:BoundColumn> </Columns> </asp:datagrid> </form> </body> </HTML> 19

20 Using a DataSet in place of a DataReader is required so the DataGrid can determine the total number of rows in the collection, which unfortunately the DataReader doesn t support. You can think of a DataSet as a cached version of your query. We also need a way to fill the DataSet. The DataAdapter serves this purpose with it s Fill method. Dim daparceldata as new OleDbDataAdapter() daparceldata.selectcommand = mycommand Dim dsparceldata as New DataSet() daparceldata.fill(dsparceldata, "qryparceldata") Imagine that you are in the middle of reviewing some records in a DataGrid, and on the second page of data, you decide to sort the information to make it more manageable. Wouldn t you want to see the beginning of the list again based on your sort? That s what our new line in the SortDataGrid function does. Anytime there is a sort of the items, the first page will be displayed. dgparceldata.currentpageindex = 0 The last bit of code is the paging event handler that gets triggered every time someone moves forward or back a page. The current page is advanced by one, and the data is rebound to the DataGrid Sub PageDataGrid(sender as Object, e as DataGridPageChangedEventArgs) dgparceldata.currentpageindex=e.newpageindex BindData(ViewState("SortExpression") & " " & ViewState("SortDirection")) Lastly, the DataGrid definition needs to be updated to support paging. There are just a few simple attributes that need to be updated. The page size needs to be specified, the event handler needs to be defined, and the AllowPaging attribute needs to be set to true. <asp:datagrid id="dgparceldata" runat="server" AllowSorting="True" OnSortCommand="SortDataGrid" AllowPaging="True" OnPageIndexChanged="PageDataGrid" AutoGenerateColumns="False" Width="100%" PageSize="8"> Adding the paging support for our DataGrid wasn t that difficult, and makes site navigation much easier. 20

21 Editing DataGrids One of the desired features of this application is to be able to change the status of a parcel. For instance, a potential buyer may want to make an offer on a parcel of land. To accomplish this, we would like the person to be able to click on the parcel of interest, and change the status from Available to Under Contract. To further that problem, rather than let ASP.NET give us the default editing tools, such as a text box that supports free typing, we would like to restrict the input to one of several supported values using a drop down control. This will reinforce consistency in data entry, and assure that the selection is valid. There are a few ways to accomplish this. If the values are dependant on a foreign key in our database, we may elect to bind the drop down list to the table that supports the values. Alternatively, we may elect to simply provide the drop down values in the ASP.NET page. The latter choice makes our task a bit more digestible, so that is what will be shown here. Regardless of which technique we choose above, it will be our first exposure to creating a template column. In previous examples, we have simply used the bound column element within the DataGrid, but in this case, when we initiate the editing process, we want to see something other than the default text box control. To accomplish this, we must create a template column that contains the controls we would like to appear under certain conditions; a label for the item template, and a drop down for the edit item template. Finally, we need a host of functions to handle the events when the user selects the edit button for a given row, which will show the editable version of the DataGrid. Once that is displayed, there are two more buttons; one for canceling the modifications, and another for updating the database. 21

22 Page Language="VB" %> Import Namespace="System.Data" %> Import Namespace="System.Data.OleDb" %> <HTML> <HEAD> <LINK title="style" href="../styles.css" type="text/css" rel="stylesheet"> <script runat="server"> Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack ViewState("OBJ_KEY")=Request("OBJ_KEYS") BindData() End If Sub BindData() Dim objconn as New OleDbConnection(ConfigurationSettings.AppSettings("connString")) objconn.open() 'You must open the db connection before populating the DataReader Dim strsql as String = "SELECT * FROM Parcels where [Parcel_Name] IN (" & ViewState("OBJ_KEY") & ")" Dim objcmd as New OleDbCommand(strSQL, objconn) Dim objdr as OleDbDataReader objdr = objcmd.executereader() dgparcels.datasource = objdr dgparcels.databind() Sub dgparcels_edit(sender As Object, e As DataGridCommandEventArgs) dgparcels.edititemindex = e.item.itemindex BindData() Sub dgparcels_cancel(sender As Object, e As DataGridCommandEventArgs) dgparcels.edititemindex = -1 BindData() Sub dgparcels_update(sender As Object, e As DataGridCommandEventArgs) 'Read in the values of the updated row Dim iparcelid as Integer = e.item.cells(1).text Dim ddstatuscontrol as DropDownList = e.item.cells(4).findcontrol("ddstatus") 'Construct the SQL statement using Parameters Dim strsql as String = "UPDATE [Parcels] SET [Status] WHERE [Parcels_ID] ' Create Instance of Connection and Command Object '1. Create a connection Const strconnstring as String = "PROVIDER=Microsoft.Jet.OLEDB.4.0; & _ DATA SOURCE=C:\MapGuide Projects\Maplewood Sales\dbf\MaplewoodSales.mdb;" Dim objconn as New OleDbConnection(strConnString) objconn.open() Dim mycommand as OleDbCommand = new OleDbCommand(strSQL, objconn) mycommand.commandtype = CommandType.Text ' Add Parameters to the SQL query Dim parameterstatus as OleDbParameter = new OleDbParameter("@Status", OleDbType.VarWChar) parameterstatus.value = ddstatuscontrol.selecteditem.value mycommand.parameters.add(parameterstatus) Dim parameterparcelid as OleDbParameter = new OleDbParameter("@Parcels_ID", OleDbType.Integer) parameterparcelid.value = iparcelid mycommand.parameters.add(parameterparcelid) mycommand.executenonquery() 'Execute the UPDATE query objconn.close() 'Finally, set the EditItemIndex to -1 and rebind the DataGrid dgparcels.edititemindex = -1 BindData() </script> 22

23 </HEAD> <body> <form runat="server" ID="Form1"> <asp:datagrid id="dgparcels" runat="server" AutoGenerateColumns="False" OnEditCommand="dgParcels_Edit" OnUpdateCommand="dgParcels_Update" OnCancelCommand="dgParcels_Cancel" Width="100%"> <HeaderStyle CssClass="bluebold"></HeaderStyle> <AlternatingItemStyle CssClass="greybackground"></AlternatingItemStyle> <ItemStyle CssClass="whitebold"></ItemStyle> <Columns> <asp:editcommandcolumn ButtonType="LinkButton" UpdateText="Update" CancelText="Cancel" EditText="Edit Info"></asp:EditCommandColumn> <asp:boundcolumn DataField="Parcels_ID" ReadOnly="True" HeaderText="Parcels ID"></asp:BoundColumn> <asp:boundcolumn DataField="Parcel_Name" ReadOnly="True" HeaderText="Parcel Name"> <ItemStyle HorizontalAlign="Right"></ItemStyle> </asp:boundcolumn> <asp:boundcolumn DataField="Perimeter" ReadOnly="True" HeaderText="Perimeter"></asp:BoundColumn> <asp:templatecolumn HeaderText="Status"> <ItemTemplate> <asp:label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Status") %>'> </asp:label> </ItemTemplate> <EditItemTemplate> <asp:dropdownlist id="ddstatus" runat="server"> <asp:listitem Value="Available">Available</asp:ListItem> <asp:listitem Value="Sold">Sold</asp:ListItem> <asp:listitem Value="n/a (Open Space)">n/a (Open Space)</asp:ListItem> <asp:listitem Value="Under Contract">Under Contract</asp:ListItem> </asp:dropdownlist> </EditItemTemplate> </asp:templatecolumn> </Columns> </asp:datagrid> <P> <asp:label id="label1" runat="server"></asp:label></p> </form> </body> </HTML> In this example, we go back to using the DataReader as in some of the earlier examples. Let s take a look at some of the code snippets, and discuss their relevance. If we first take a look at the DataGrid definition, we ll see that we need several event handlers. The OnEditCommand attribute defines the event handler for when an edit button is selected. When a row is in edit mode, two more buttons take the place of the edit button; an update and cancel. These also need event handlers, which we ll talk about next. <asp:datagrid id="dgparcels" runat="server" AutoGenerateColumns="False" OnEditCommand="dgParcels_Edit" OnUpdateCommand="dgParcels_Update" OnCancelCommand="dgParcels_Cancel" Width="100%"> The dgparcels_edit() function is responsible for placing the row in edit mode, and rebinding to the data. Sub dgparcels_edit(sender As Object, e As DataGridCommandEventArgs) dgparcels.edititemindex = e.item.itemindex BindData() The dgparcels_cancel() function is responsible for taking us out of the edit mode without updating anything, and rebinding to the data. Sub dgparcels_cancel(sender As Object, e As DataGridCommandEventArgs) dgparcels.edititemindex = -1 BindData() 23

24 The dgparcels_update() function is where the updating really happens. The first thing the function does is to read the values of ParcelID, and the status of the parcel by reading the contents of the appropriate cells for the highlighted rows. Sub dgparcels_update(sender As Object, e As DataGridCommandEventArgs) 'Read in the values of the updated row Dim iparcelid as Integer = e.item.cells(1).text Dim ddstatuscontrol as DropDownList = e.item.cells(4).findcontrol("ddstatus") The next line defines the update query using parameters. Dim strsql as String = "UPDATE [Parcels] SET [Status] WHERE [Parcels_ID] The next block of code makes the connection to the database. Const strconnstring as String = "PROVIDER=Microsoft.Jet.OLEDB.4.0; & _ DATA SOURCE=C:\MapGuide Projects\Maplewood Sales\dbf\MaplewoodSales.mdb;" Dim objconn as New OleDbConnection(strConnString) objconn.open() Dim mycommand as OleDbCommand = new OleDbCommand(strSQL, objconn) mycommand.commandtype = CommandType.Text The next two blocks of code add the parameters to the SQL query, based on the values in the appropriate cells of the selected row. Dim parameterstatus as OleDbParameter = new OleDbParameter("@Status", OleDbType.VarWChar) parameterstatus.value = ddstatuscontrol.selecteditem.value mycommand.parameters.add(parameterstatus) Dim parameterparcelid as OleDbParameter = new OleDbParameter("@Parcels_ID", OleDbType.Integer) parameterparcelid.value = iparcelid mycommand.parameters.add(parameterparcelid) The next lines execute the update query, and close the connection. mycommand.executenonquery() objconn.close() 'Execute the UPDATE query Finally, we take the row out of edit mode, and rebind the data to the grid to reflect the update. dgparcels.edititemindex = -1 BindData() In the body section of the document, you will see that we used a template column for the first time. Typically when we would like to display data via a report, we can simply have the DataGrid automatically generate the columns based on the query. In some of the previous examples, we have turned off the automatic feature in favor of explicitly identifying the columns to include in our reports. With this report we have gone one step further, as we have one column that we would like to customize. Specifically, when we take our DataGrid into edit mode, we would like the parcel status column to be rendered as a drop down list, rather than an edit box as the default configuration would provide. Creating a template column allows us to have greater control over the look of the data bound elements either when displayed as an item, alternating item, or when in edit mode. The ItemTemplate in this case is simply text, much the same as it would be if it were simply a bound 24

25 column. The EditItemTemplate, however contains the definition for our DropDownList, along with each ListItem that represents a valid selection. When the user edits the database, they will only be able to select from the values provided, ensuring that we can accurately predict their input will be one of four valid selections. This makes it easy to theme a layer by this information in MapGuide. <asp:templatecolumn HeaderText="Status"> <ItemTemplate> <asp:label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Status") %>'> </asp:label> </ItemTemplate> <EditItemTemplate> <asp:dropdownlist id="ddstatus" runat="server"> <asp:listitem Value="Available">Available</asp:ListItem> <asp:listitem Value="Sold">Sold</asp:ListItem> <asp:listitem Value="n/a (Open Space)">n/a (Open Space)</asp:ListItem> <asp:listitem Value="Under Contract">Under Contract</asp:ListItem> </asp:dropdownlist> </EditItemTemplate> </asp:templatecolumn> Selection in DataGrids One of the interesting problems that is presented by using MapGuide with ASP.NET is that the controls are rendered on the server side, making it difficult to add client side code. For instance, if we were allowed to use the alert( Hello World ) function within the code blocks we have seen so far, the alert would show up on the server, not the client. Since the server side controls don t have OnClick attributes, we need to find an alternative method for adding that attribute. Adding Client Side Code to a Server Control In this project, it is desired to add a select link button to the table. The select button in a DataGrid control will automatically highlight the selected row, but we would like to extend that in this example to also highlight the corresponding parcel in the MapGuide ActiveX control. In order to achieve this, we will look at how the OnClick attribute can be added to each of the select buttons programmatically. 25

26 import Namespace="System.Data.OleDb" %> import Namespace="System.Data" %> Page Language="VB" %> <HTML> <HEAD> <LINK title="style" href="../styles.css" type="text/css" rel="stylesheet"> <script language="javascript" type="text/javascript" src="../scripts/home.js"></script> <script runat="server"> ' Insert page code here Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then ViewState("OBJ_KEY")=Request("OBJ_KEYS") BindData() End If Sub BindData() Dim CommandText As String = "select * from Parcels where [Parcel_Name] IN (" & _ ViewState("OBJ_KEY") & ")" Dim myconnection As New OleDbConnection(ConfigurationSettings.AppSettings("connString")) Dim mycommand As New OleDbCommand(CommandText, myconnection) myconnection.open() dgparceldata.datasource = mycommand.executereader(commandbehavior.closeconnection) dgparceldata.databind() End sub Sub dgparceldata_itemdatabound(sender as Object, e as DataGridItemEventArgs) ' First, make sure we're NOT dealing with a Header or Footer row If e.item.itemtype <> ListItemType.Header AND _ e.item.itemtype <> ListItemType.Footer then 'Now, reference the LinkButton control that the Delete ButtonColumn 'has been rendered to Dim selectbutton as LinkButton = e.item.cells(0).controls(0) 'We can now add the onclick event handler selectbutton.attributes("onclick") = "javascript:zoomto('" & _ DataBinder.Eval(e.Item.DataItem, "Parcel_Name") &"')" End If </script> </HEAD> <body> <form runat="server" ID="Form1"> <asp:datagrid id="dgparceldata" runat="server" Width="100%" OnItemDataBound="dgParcelData_ItemDataBound"> <HeaderStyle CssClass="bluebold"></HeaderStyle> <SelectedItemStyle CssClass="bluehighlight"></SelectedItemStyle> <AlternatingItemStyle CssClass="greybackground"></AlternatingItemStyle> <ItemStyle CssClass="whitebold"></ItemStyle> <Columns> <asp:buttoncolumn Text="Select" CommandName="Select"></asp:ButtonColumn> </Columns> </asp:datagrid> <a href="#" onclick="aboutmapguide()">about MapGuide</a> </form> </body> </HTML> In this example, we have added a button column that includes a select button. ASP.NET manages the selection of this row automatically, by including code that requests a post back, which includes modified HTML to render the selected row as having a different foreground/background colors. Because this is a server side control, there is not OnClick event that code can be added to. You will notice that the OnItemDataBound event handler triggers the dgparceldata_itemdatabound function each time a row of data is appended to the DataGrid. 26

27 The dgparceldata_itemdatabound() function is responsible for adding the OnClick attribute to each row. In this case, we are using defining the OnClick to launch a function called zoomto(), which takes a Parcel_Name as a parameter. That would mean that each row needs a unique value from the database that correlates to the remainder of the information on that row. To accomplish this, we use the function DataBinder.Eval(e.Item.DataItem, "Parcel_Name"), which resolves to the appropriate value for each given row. Sub dgparceldata_itemdatabound(sender as Object, e as DataGridItemEventArgs) ' First, make sure we're NOT dealing with a Header or Footer row If e.item.itemtype <> ListItemType.Header AND _ e.item.itemtype <> ListItemType.Footer then 'Now, reference the LinkButton control that the Delete ButtonColumn 'has been rendered to Dim selectbutton as LinkButton = e.item.cells(0).controls(0) 'We can now add the onclick event handler selectbutton.attributes("onclick") = "javascript:zoomto('" & _ DataBinder.Eval(e.Item.DataItem, "Parcel_Name") &"')" End If The zoomto() Function Although beyond the scope of explanation in this paper, it may be helpful to see the code that defines the zoomto() function. After we get a reference from the MapGuide ActiveX control, we simply get the map object indicated by the key that is passed in the function. Then, the selection is cleared, and the map object or objects referenced by the key is added to the selection. Finally, the view is changed by zooming to the selected item. function zoomto(layerkey) { var map = getmap(); var ZoomScale = map.getscale()/700; //some zoom scale var layer = map.getmaplayer("autodesk University") var mapobj = layer.getmapobject(layerkey); map.getselection().clear(); map.getselection().addobject(mapobj,false) map.zoomselected() map.zoomout() return; } 27

28 Creating a Chart One of the metrics I might be interested in as I manage the types of homes available at my development, might be the amount of revenue generated by the different types of homes. For instance, if Victorian homes are my most profitable, and they are selling well, I may elect to add additional Victorian homes to the options a customer has. In this report, we are using a third party.net control from to dynamically generate graphs and charts from our SQL queries. You will notice that in the example code provided, not much is different from our first MapGuide based report. The primary exception is that after we set the data source for the chart, we set the DataGrid s datasource to that of the chart. While we could have executed the reader more than once, it seemed rather inefficient to request the data from the server twice. There are also a number of settings that are specific to the control being used. Notice that the NameSpace dotnetcharting was registered in the header, along with the name of the assembly that defines what this object is. Like all.net components, a reference to the.dll must be defined in the references of your project. Visual Studio offers an easy method of adding any component to a project. <%@ Register TagPrefix="dotnetcharting" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %> <%@ import Namespace="System.Data.OleDb" %> <%@ import Namespace="System.Data" %> <%@ Page Language="VB" %> <HTML> <HEAD> <LINK title="style" href="../styles.css" type="text/css" rel="stylesheet"> <script runat="server"> ' Insert page code here Sub Page_Load(sender as Object, e as EventArgs) 'set global properties Chart.Title="Home Costs" Chart.ChartArea.XAxis.Label.Text="Customers" Chart.TempDirectory="temp" Chart.Debug=true Chart.Type = ChartType.Pie 'Adding series programatically SetData() Chart.SeriesCollection.Add() End sub 28

29 Function SetData() Dim conn As OleDbConnection = new OleDbConnection(ConfigurationSettings.AppSettings("connString")) Dim selectquery As string = "select Date, SalePrice, Name from qryparcelssold where & _ [Parcel_Name] IN (" & Request("OBJ_KEYS") & ")" Dim mycommand As OleDbCommand = new OleDbCommand(selectQuery, conn) conn.open() 'set datareader to data property Chart.Series.Data = mycommand.executereader(commandbehavior.closeconnection) dgparceldata.datasource = Chart.Series.Data dgparceldata.databind() 'Cleanup conn.close() End Function </script> </HEAD> <body> <form runat="server" ID="Form1"> <TABLE id="table1" cellspacing="1" cellpadding="1" width="100%" border="0"> <TR> <TD valign="top"> <asp:datagrid id="dgparceldata" runat="server" AutoGenerateColumns="False"> <HeaderStyle CssClass="bluebold"></HeaderStyle> <AlternatingItemStyle CssClass="greybackground"></AlternatingItemStyle> <ItemStyle CssClass="whitebold"></ItemStyle> <Columns> <asp:boundcolumn DataField="Name" HeaderText="Home Style Name"></asp:BoundColumn> <asp:boundcolumn DataField="SalePrice" HeaderText="Cost" DataFormatString="{0:$#,###}"></asp:BoundColumn> <asp:boundcolumn DataField="Date" HeaderText="Date" DataFormatString="{0:d}" ItemStyle-HorizontalAlign="Right"></asp:BoundColumn> </Columns> </asp:datagrid></td> <TD valign="top"> <dotnetcharting:chart id="chart" runat="server" AutoGenerateColumns="False"> </dotnetcharting:chart> </TD> </TR> </TABLE> </form> </body> </HTML> What if I Don t Want a DataGrid? That is a good question. There are many strategies for creating reports that are not quite so tabular. One such example is the home detail report that is part of the application used in this example. Instead of displaying tabular data, it displays text and images that are databound. To make life a bit easier, the entire report is within a DataList, a very close relative of the DataGrid. Instead of information being presented in tabular form, it is presented in well, a list. With this control, elements will appear sequentially. 29