Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

A Crash Course on Custom ASP.NET Data-bound Controls : Page 2

Data-bound controls require a data source property and a set of string properties that link to particular columns of the data source. In addition, they need an Items collection property to track all the building blocks of the control's user interface. Finally, a well-done data-bound control supports styles and custom events.


advertisement
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 used—the 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 is—an indicative table of members for realistic data-bound controls.

Table 1: Typical members of a data-bound control.

Member

Description



DataSource

Property of type object gets or sets the data source that the control is displaying data for.

DataTextField

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.

DataValueField

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.

Items

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.

DataBind

Built-in, method you can override to fire the data binding process

CreateChildControls

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.

CreateControlHierarchy

Internal method that most built-in controls use to factor out the process of creating the user interface of the control.

Style properties

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 and ItemDataBound 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 header—title 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 cells—label 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 simpler—in 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.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap