Skip navigation

Customize DataGrid Formatting

Format DataGrid data to look the way you want.






Customize DataGrid Formatting

Format DataGrid data to look the way you want.


By Wayne S. Freeze


The DataGrid is perhaps the most useful Web control of all the controls supplied with ASP.NET. Its paging feature allows you to display data to your users in manageable pieces, which is especially important when your user wants to browse through more than a dozen or so rows of data. One drawback to the DataGrid, however, is it forces you to display your data in a tabular format. Typically you would display unformatted data using the DataList Web control. Unlike the DataGrid control, however, the DataList control can't display data one page at a time.


Fortunately, this problem has an easy solution. Like the DataList control, DataGrid uses templates, giving you control over how the data is formatted. Using templates, you can organize your data any way you want.


Use Templates

No matter what you do, DataGrid is still a tabular control. Simply because a DataGrid is a tabular control, however, doesn't mean your data should like you're displaying it using Excel. Remember that a grid needs only a single column, which means you have a single column that spans the entire row.


Each cell in the DataGrid can be displayed using the ItemTemplate tag:




Inside the ItemTemplate tag is a series of HTML and ASP.NET tags that control how a particular cell is displayed. In the previous code example, an asp:literal control is used to display a single value within the cell.


You create the asp:literal control's Text attribute dynamically using the <%# expression %> syntax. You write this expression in the language declared in the @Page directive at the start of the Web page, and the expression should evaluate to a string value to be included in the Web page. In this case, the DataBinder.Eval method is called to extract the value from the current row being processed.


The DataBinder.Eval method has three arguments and returns a string value. The first argument is the object you want to bind to. In the case of DataGrid, you should bind to Container.DataItem, which represents the current row being processed. The second argument is the name of the data item you want to extract (note that this must be a string value). The third argument is optional and, if present, must contain a .NET-format string for its value.


Instead of using the DataBinder.Eval method to display a value, you can use the Container.DataItem object directly:




This has the advantage of being somewhat more efficient because the DataBinder.Eval method is late-bound, while Container.DataItem is early-bound. But if you're displaying a relatively small number of rows at a time (25 or less), the difference in performance isn't significant and both will work well.


Build Your Own Formatter

You can use the same approach to build your own formatting routine. This approach can be invaluable when building your own applications. For example, consider the program shown in Figure 1. This program displays a list of information about various customers.


Figure 1. This program uses a custom formatting routine to generate the HTML that displays the information for each customer.


Notice that this program displays different information for each customer, depending on the information stored in the database. This is something you can't do using the previously described techniques. This code shows you how to create an ItemTemplate that calls the custom formatter:




You can see the code for the CustomerSummary formatting routine shown in Figure 2. This routine accepts a single parameter, dr, which has a type of DataRowView. Through the DataRowView argument, you can access all the fields in the row. This is invaluable if you want to create a cell that uses multiple values from the row (as in this example) or if you want to display a single value computed from multiple values in the row.


Public Function CustomerSummary(ByVal dr As DataRowView) As String


Dim s As String


s = "" & dr("Name") & ""

s &= "

  • Customer Id: " & dr("CustomerId").ToString

    s &= "

  • Address: " & dr("Street") & dr("City")

    s &= ", " & dr("State") & " " & dr("ZipCode")


    If dr("Phone").Length > 0 Then

       s &= "

  • Phone: " & dr("Phone")


    End If


    If dr("EMailAddress").Length > 0 Then

       s &= "

  • EMail: " & dr("EMailAddress")


    End If


    If dr("Comments").Length > 0 Then

       s &= "

  • Comments: " & dr("Comments")

    End If


    Return s


    End Function

    Figure 2. By using templates, you can customize the look of the information displayed with a DataGrid control.


    The CustomerSummary routine begins by declaring a string variable that will hold the return value. If you are going to return a long string value, you might want to use a StringBuilder object in place of a simple string variable. The remainder of this routine simply appends various items from the DataRowView to the return string. Note that this routine takes advantage of the fact that it can test for empty strings and suppress their display to display the information presented to the user more simply. Finally, the string containing the formatted HTML is returned so the results can be displayed in the proper cell in the DataGrid.


    The sample code in this article is available for download.


    Wayne S. Freeze is a full-time computer book author with more than a dozen titles to his credit, including Windows Game Programming with Visual Basic and DirectX (Que) and Unlocking OLAP with SQL Server and Excel 2000 (Hungry Minds). He has more than 25 years of experience using all types of computers, from small, embedded microprocessor control systems to large-scale IBM mainframes. Freeze has a master's degree in management information systems as well as degrees in computer science and engineering. You can visit his Web site at and send him e-mail at mailto:[email protected]. He loves reading e-mail from his readers, whose ideas, questions, and insights often provide inspiration for future books and articles.




  • Hide comments


    • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

    Plain text

    • No HTML tags allowed.
    • Web page addresses and e-mail addresses turn into links automatically.
    • Lines and paragraphs break automatically.