When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article

ASP ASP.NET ASP FAQs Message Board Feedback
 
Print this Page!
Published: Sunday, July 21, 2002

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!

- continued -

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:

<asp:datagrid runat="server" AutoGenerateColumns="False">	
  <Columns>
    <asp:BoundColumn HeaderText="Quarter" DataField="Quarter" />
    <asp:TemplateColumn HeaderText="P & L Statement">
      <ItemTemplate>
        <table border="0">
          <tr>
            <td align="right"><b>Revenue:</b></td>
            <td><%# DataBinder.Eval(Container.DataItem, "Revenue") %></td>
          </tr>
          <tr>
            <td align="right"><b>Profit:</b></td>
            <td><%# DataBinder.Eval(Container.DataItem, "Profit") %></td>
          </tr>
        </table>
      </ItemTemplate>
    </asp:TemplateColumn>
  </Columns>	
</asp:datagrid>

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:

QuarterP & L Statement
Q1 2001
Revenue: 450391000
Profit: 102200111
Q2 2001
Revenue: 391000
Profit: -154950
Q3 2001
Revenue: -150938000
Profit: -902200

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:

<asp:datagrid runat="server" AutoGenerateColumns="False">	
  <Columns>
    <asp:BoundColumn HeaderText="Quarter" DataField="Quarter" />
    <asp:TemplateColumn HeaderText="P & L Statement">
      <ItemTemplate>
        <table border="0">
          <tr>
            <td align="right"><b>Revenue:</b></td>
            <td><%# MakeNegRed(DataBinder.Eval(Container.DataItem, "Revenue")) %></td>
          </tr>
          <tr>
            <td align="right"><b>Profit:</b></td>
            <td><%# MakeNegRed(DataBinder.Eval(Container.DataItem, "Profit")) %></td>
          </tr>
        </table>
      </ItemTemplate>
    </asp:TemplateColumn>
  </Columns>	
</asp:datagrid>

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:

Function MakeNegRed(input as String) as String
  'See if the number is less than 0
  If Int32.Parse(input) < 0 then
    Return "<font color=""red"">" & input & "</font>"
  Else
    Return input
  End If
End Function
[View a Live Demo]

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!

  • By Scott Mitchell



  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article