What We're Going to Do
In the rest of the article, I'll develop an HTML charting control that reads data from an enumerable data source and builds a bar chart. No images or graphics will be usedthe resulting bar chart will be nothing more than a colorful HTML table.
|In the sample BarChart control, the Items collection is populated during the data binding step and consumed at rendering time.|
Table 1 lists all the key members that a data-bound control should have. Filling the table, I considered properties and methods that are commonly used. You might not agree with my choices for some of the properties, or you might need to add a few more or different members. Just take the content of Table 1 for what it really isan indicative table of members for realistic data-bound controls.
Table 1: Typical members of a data-bound control.
Property of type object gets or sets the data source that the control is displaying data for.
String property gets or sets the data source field to use to label the data-bound items of the control. The exact role of this property depends on the user interface of the control.
String property gets or sets the data source field to use to determine the value of data-bound items of the control. The exact role of this property depends on the user interface of the control.
Collection property exposes the list of items that form the user interface of the control. The exact role of this property depends on the user interface of the control. A variation of this property (that is, an additional similar property or a different implementation of this one), can also be used to extend the data source of the control.
Built-in, method you can override to fire the data binding process
Protected method you can override to build the user interface of the control. For complex controls, using this method is preferable to overriding the Render method.
Internal method that most built-in controls use to factor out the process of creating the user interface of the control.
Set of Style-derived objects used to give a graphical skin to parts of the control (e.g., header, items, footer).
In addition, a data-bound control usually fires a few events to notify callers of some key operations it is performing. Good examples of events to fire are the creation of any constituent items and the binding of these items to data elements. To be really effective and powerful, each data-bound control should fire a pair of events like the ItemCreated
events in the DataGrid control. The output of a data-bound control must always be customizable enough through styles and properties. However, item-related events add more power as they enable developers to apply context-sensitive customization based on runtime conditions.
|Figure 1: The BarChart Control: The figure shows the BarChart sample control in action.|
Let's go on and build an HTML bar charting control which, in the end, will look a lot like the control in Figure 1
What are the building blocks of the control in the figure? To start off, the control has a twofold headertitle and subtitle, each with its own style. Next, it features a handful of data items and a footer that is not shown in the figure. The whole control renders out like an HTML table where each data item is a table row with two cellslabel and value. The value cell is made of a couple of Label controls.
By the way, I originally wrote the BarChart control as one of the examples for my book Programming ASP.NET, from Microsoft Press. Portions of that control also found their way to an MSDN Magazine
article (June 2003). The BarChart control described here is based on the same idea, but it is powered by substantially different code. The source has been cleaned up, refactored, made simplerin short, rewritten from scratch.
It's my pleasure to give credit to Steve Orr for his great idea of using a Label control with the Width property set to a percentage. Steve's article is online at http://steveorr.net/articles/BarGraphs.aspx.