Customizing DataBinded Output in Templates
By Scott Mitchell
| An Application of the Concepts Presented in this Article... |
|---|
| Dimitrios Markatos has written an excellent article titled Highlighting Search Keywords in a DataGrid Web Control, which shows how to use this technique (along with regular expressions) to highlight search keywords in the results of a search query (similar to the way Google does it). Once you've read this article it's definitely worth a read! |
Introduction
In the article series An Extensive View of the DataGrid, author Scott Mitchell examined how to use the DataGrid Web control to easily format database data into an HTML table. Specifically in Part 5, Scott illustrated how to allow for the most customizable formatting of a DataGrid's HTML output through the use of TemplateColumns. TemplateColumns allow the developer to specify HTML and the output from database columns together. The live demo from Part 5 illustrated how to use TemplateColumns to have output that had HTML tables nested inside HTML tables. The code for such a DataGrid might look like:
|
The above example illustrates how to use TemplateColumns to customize the HTML output of a data-bound
DataGrid. (Note that this template syntax is the same that is used in the DataList and Repeater controls.
With those controls, however, you would simply omit the TemplateColumn control and use just the ItemTemplate.)
What the above example does not demonstrate is how to conditionally customize the HTML output
of the databound output based upon the value of the data. In this artice we will examine how to
alter the HTML outputted by the databinding syntax (i.e., <#% DataBinder.Eval(...) %>)
in a template.
Altering the HTML Based on the Value of the Databound Data
Imagine if, in the above example, we wished to display the databound output (the output from the
Revenue and Profit columns) in a different color depending on
the value of the data. That is, if the Revenue or Profit figures are positive, the text should be black,
but if they are negative, the text should be red. For example, the DataGrid output might look like:
| Quarter | P & L Statement | ||||
|---|---|---|---|---|---|
| Q1 2001 |
| ||||
| Q2 2001 |
| ||||
| Q3 2001 |
|
Clearly we need to somehow be able to, at render time, determine the value of the data in the
databound statement and decide how to alter the output based on the value. Realize that the
databinding statement, DataBinder.Eval(Container.DataItem, "ColumnName"), produces a string output
based on the value of the particular database column name. The databinding syntax, <%# ... %>
simply emits the string produced, much like <%=...%> in classic ASP. Hence, we
can create a function that accepts a string (the output of DataBinder.Eval(Container.DataItem, "ColumnName")),
examines the string and alters it, if necessary, and then returns the string, which will be emitted by the
<%# ... %> syntax.
Don't panic if the above paragraph thoroughly confused you. Hopefully examining some code will clear things up. Essentially, our DatatGrid code will now look like:
|
The function MakeNegRed (which we still need to write) takes in as a string input the
value produced from the particular DataBinder.Eval statement. The value returned by
MakeNegRed will then be emitted. This sequence of events allows us to customize the HTML
output from the DataBinder.Eval statement based upon the value of the data. To complete
this example we need to write the MakeNegRed function, which is shown below:
|
Conclusion
In this article we examined how to customize the output of databound data in a template at render-time. Such techniques can be useful for stylizing the HTML. Note that all you need to do is create a function that takes in a string as input and returns a string as output. You are not limited to only accepting a single string, you could, in fact, accept many, like:
<%# SomeFunc(DataBinder.Eval(Containter.DataItem, "ColName"), DataBinder.Eval(Container.DataItem,
"ColName") %> (here the function SomeFunc would have to accept
two string parameters as input).
Happy Programming!