|Binding the DataList ASP.NET Control with Dynamic Templates|
|Learn how to programmatically implement the ITemplate interface to dynamically create the ItemTemplate content for a DataList Web Server control.|
Welcome to the 22nd chapter of the FREE online programming course:
Back in the last few chapters, we've looked at several different approaches to data binding in ASP.NET web applications: binding list controls, using binding expressions and binding the Repeater control (the most lightweight of all data bound list controls).
Throughout this chapter, you'll learn about the following:
DataList Web Server ControlThe DataList offers a richer feature set than the Repeater, including automatic generation of <table>, <tr> and <td> tags (optional) to hold each list item. DataList also requires that you create templates to define the content and layout of each item.
DataList supports 7 different templates. Beside those found in the Repeater, the DataList also provides the SelectedItemTemplate and the EditItemTemplate - to allow selecting and editing of items.
Editing and selecting in data bound list controls will be discussed when we introduce the DataGrid control.
The layout of the DataList control is controlled with the RepeatLayout property. Setting this property to RepeatLayout.Table will display the DataList in a table format, while RepeatLayout.Flow displays the DataList without a table structure.
When you drop a DataList control on a web page, at design time, you'll get the following:
Delphi allows you to specify some of the templates visually. Right click the DataList and select "Header and Footer Templates" from the drop down list, to edit the templates.
Add a hyperlink to the Footer Template (assign both the Text and the NavigateUrl properties), and a "string" to the Header Template.
Select "End Template Editing" from the right-click menu.
Note that the design time rendering of the control has not changed, however when you switch to the "aspx/html" view the asp markup will be:
Note: if you run the project now, you'll get an "empty" page at run time (rendered to the user in a Web Browser). DataList will not render if the DataBind method is not called.
The Page will have a property Articles (ArrayList of TArticle objects).
Here's how the Page_Load event should look:
The "FillArticles" method simply places some TArticle objects in the Articles property:
Note that while the DataSource property is assigned and the DataBind method is called - at run time - no items will be renderd! Reason? We haven't specified the ItemTemplate!
Take a time to look at the resulting HTML:
The "About Delphi Programming" string is what we placed in the Header Template. The "<a id="DataList1__ctl4_HyperLink1" href="http://delphi.about.com">delphi.about.com</a>" is the HyperLink control we added to the FooterTemplate.
Since I've already explained how to create a sample ItemTemplate (declaratively inside the control's markup tags) for the Repeater control and how DataSource and DataBind (and the DataBinder class) are used - this time I'll show you how to create one of the templates programmatically.
Implementing the ITemplate InterfaceTo create any of the templates programmatically a custom class needs to implement the ITemplate interface. ITemplate has only one procedure, InstantiateIn, which receives a Control parameter. The control passed to InstantiateIn defines the Control object to which child controls in the template will be parented. Here's the full source of a custom class implmenting the ITemplate interface.
The InstantiateIn procedure creates and adds controls to the specified container control. If data binding is required on any of these controls, the DataBinding event must be hooked up.
I decided to use the PlaceHolder control as it provides no rendering of its own and can be used as a container. A HyperLink control is created and placed "inside" the PlaceHolder.
DataBinding even handler explained
Once we lay our hands on the DataItem, by simply casting it to the correct class (TArticle) we can assign values to properties of the HyperLink control created in the InstantiateIn implementation.
Note: while this looks messy, it's quite straight-forward ... just follow the code :)
Finally, the page rendered to the user:
Download the full source to explore. Also, try playing with various properties of the DataList.
To the next chapter: A Beginner's Guide to ASP.NET Programming for Delphi developersThat's it for today. In the next chapter we'll continue exploring the topic of data binding in ASP.NET.
If you need any kind of help at this point, please post to the Delphi Programming Forum where all the questions are answered and beginners are treated as experts.
A Beginner's Guide to ASP.NET Programming for Delphi developers: Next Chapter >>