Introduction

Displaying data in a GridView control is an excellent way to table a large amount of information. Unfortunately, the GridView is not visually intuitive and spotting data trends within a table is difficult at best. Using a Dundas Chart control to display your data gives you an intuitive means to show data trends and concepts, but alas, it doesn't provide you with ability to table your data. If you have a large volume of data, a tabular representation of that data would certainly be useful, but you want your data displayed intuitively. So how do you get the best of both Worlds? In short, you combine a Dundas Chart control with a .NET GridView control, and then bind both of those controls to a common data source. In this article, I am going to demonstrate how to combine a Dundas Chart with a .NET GridView control to create a dynamic duo to access data stored in an Access database file. It is worthy to note that I could have used any data source with this model to get the same results. In fact, you can use any database or even an XML file as a data source to simultaneously display your data in a Dundas Chart and a .NET GridView. Figure 1 below shows the completed web application as it would appear in your internet browser. The chart in the top section visually displays all of the data contained within the GridView below it. The data shown in the GridView is also completely editable, and any updates made to that data will be reflected automatically in the chart.

Figure 1: A Dundas Chart combined with a .NET GridView

Before We Begin

Here are some important points to note before we begin:

• This application was created using Visual Studio .NET 2005. The GridView control is included as part of the Visual Studio .NET 2005 toolbox.
• In order to complete this tutorial you will need a data source. For simplicity, I have used a Microsoft Access database file called myApp_Data.mdb. For your convenience, this database file is included in the download that accompanies this article.
• The chart you see above in Figure 1 has been enhanced using a Dundas Chart Template. For your convenience, this template is included in the download that accompanies this article. However, keep in mind that this template is used purely for esthetic purposes and has no other bearing on the outcome of this example. So in short, the template makes the chart look pretty, and nothing more.
• I have purposely built this example as an ASP.NET application. For those of you who build Windows Forms applications, the conversion should be easy enough. Moreover, it is the concept that I am trying to demonstrate rather than a specific programming syntax. Having said this, no programming code was necessary to create this application example.

Lets Begin

The steps needed to create the application shown above, are set out below. Each step will be discussed in detail, where necessary, immediately following.
These are the steps to create the web application:

1. From within Visual Studio, create a new ASP.NET web application.
2. From Visual Studio's Toolbox, add a Dundas Chart to your web application.
3. From Visual Studio's Toolbox, add a GridView to your web application.
4. From Visual Studio's Solution Explorer, add the Access database file.
5. From Visual Studio's Toolbox, add an AccessDataSource control to your web application.
6. Configure the AccessDataSource control.
7. Configure the Dundas Chart control to use the AccessDataSource control as its data source.
8. Configure the GridView control to use the AccessDataSource control as its data source.
9. Run your application.

The first thing that you should notice is that nowhere in the above steps does it mention coding a whack of data access routines. This is because the GridView control allows you to perform data-binding without the need for any programming code. Dundas Charts do not require any code to do this either, since they are also designed to be straightforward and easy to use. Once you have configured these two controls to use the AccessDataSource as their data source, then your job is done.

Examining Each Step

Step 1: Create a new ASP.NET web application.

• This step is pretty much self-explanatory so we will move forward.

Step 2: Add a new Dundas Chart control to your application.

• Follow these steps to add a chart control to your application:

1. Choose the Chart control from Visual Studio's toolbox, and drag it onto your web form.
2. When the Chart Wizard appears, choose Column as your chart type.
3. Click on the Finish button to close the Chart Wizard, and complete the process.

Step 3: Add a new .NET GridView control to your application.

• Drag a new GridView control onto your web form from Visual Studio's toolbox.

Step 4: Add the MS Access .mdb file to your application's App_Data folder.

• Follow these steps to add an .mdb database file to your web application:

1. In Visual Studio's Solution Explorer, right-click on the App_Data folder and choose Add Existing Item... from the context menu.
2. Find the .mdb file, and highlight it.
3. Click on the Add button to complete the process.

Step 5: Add an AccessDataSource control to your application.

• Drag a new AccessDataSource control onto your web form.

Step 6: Configure the AccessDataSource control.

• To configure the AccessDataSource control:

1. Click on the AccessDataSource control's smart tag icon to expand its smart tag.
2. Choose Configure DataSource... from the smart tag menu.
3. In the data source dialog, browse to the .mdb file found in your App_Data folder.
4. Choose the .mdb file, and click OK to proceed.
5. In the data source dialog, click on Next and choose * from the Columns section of the dialog window.
6. Click on the Advanced button, and put a check mark in the Generate INSERT, UPDATE, and DELETE statements box. Click OK to dismiss this dialog, and return to the configure data source dialog.
7. Click on Next in the Configure Data Source dialog, and click on Finish to complete the process.

Step 7: Configure the Dundas Chart control to use the AccessDataSource as its data source.

• To configure the Dundas Chart control, follow these steps:

1. Click on the Chart to give it focus.
2. In the Properties browser, go to the Data category and click on DataSourceID. Choose AccessDataSource1 from the drop down list box.
3. Go to the Chart category in the Properties browser and click on Series (Collection) to open the Series Collection Editor.
4. Click on Series1, and under the DataSource category, choose DomSales as the value for ValueMembersY.
5. Click on Series2, and under the DataSource category choose ComSales as the value for ValueMembersY.
6. Click OK to exit the Series Collection Editor.

Step 8: Configure the .NET GridView control to use the AccessDataSource as its data source.

• To configure the .NET GridView control, follow these steps:

1. Expand the GridView's smart tag menu, and under Choose Data Source: choose AccessDataSource1.
2. Put a check in Enable Editing. This will allow you to edit the values shown in the GridView.
3. With the smart tag menu still open, choose Edit Columns... to open the field editor dialog.
4. Select each data field and set that data field's properties here. This is where you will decide what is displayed in the GridView control.
5. When you are finished, click on the OK button to close this dialog.

What I did here was to take the primary key field, which is an auto number field called PK_FileID, and set its Read Only property to True, and its Visible property to False. The reason I did all of this is because Access will fail if you try to update an auto number field. I also took the Products column and made it a Read Only column as well, since your user will have no need to change it. Finally, I gave my GridView column headers user friendly titles. For example, instead of using DomSales for the header title text, I used Domestic Sales instead. Just in case some of you are wondering why I didn't just name the original table column Domestic Sales (instead of using DomSales)? Well this is because Access will fail if you use a whitespace character in a column's title, so Dom Sales will fail, but DomSales will not. So how exactly does Access fail? Well, lets say you run your application and click on the Edit button to change some values. You make your changes, but when you click on the Update button to save your changes, your original values re-appear completely unchanged. In fact, you cannot change any values in your GridView at all, simply because you entered a tiny little whitespace character in one of your column title names...Surprise! Just thought you might like to know.

Here is one more precious bit of advice. If you have a field that shows figures as currency, like for example a price column, then you must do the following in order to have your money number values show up properly. In the Properties for each Series (described in steps 3 and 4 above) make certain that you set that Series' HtmlEncode property to False, and its DataFormatString property to {0:C}. By doing this, all of your currency amounts will show up as they should, complete with dollar signs, and zeros as required.

Step 9: Run your application.

• Compile and run your new web application.

You should be able to edit and update all of the sales data displayed within the GridView, and have those changes automatically displayed in the Charting control.

Making It Pretty

Making this application pleasing to look at is not difficult if you use the GridView's preset templates, and the Chart's Wizard. I used a preset template to visually enhance my Chart, and I also set each Series' custom attribute for DrawingStyle to Cylinder. One last thing, I set the Palette property for each Series to Dundas so that it would use the Dundas color palette for each of the columns displayed in my Chart. I would be remiss if I did not mention again that you can set all of the chart's appearance properties by simply using the Dundas Chart Wizard.

Well that's it, and you should note that we didn't have to write a single line of code! You have an application that uses a GridView to display data in a tabular format, and a Chart to display that data visually. All of the data can be easily edited at runtime, and the chart will show the new data after every update. A Dundas Chart and a .NET GridView control, they are a dynamic duo that will give all of your web applications an intuitive and professional look and feel.

Giorgio Grosso BSc.
Technical Communicator
Dundas Software Ltd.