Recipe 15.3 Conditionally Format a Data View Web Part

15.3.1 Problem

You'd like to be able to highlight certain values or rows within a table of data. Is this possible if you are displaying the data on a web page using a Data View Web Part?

15.3.2 Solution

Not only is it possible to conditionally format the data in a Data View Web Part, but you can do it without any programming. For example, let's say you wished to highlight the runners listed in the Data View Web Part from the Solution in Recipe 15.2 that were running races of 10 or more miles. Follow these steps to highlight the rows where distance is greater than or equal to 10 miles:

  1. Startup FrontPage 2003 with the existing Data View Web Part you created in the Solution in Recipe 15.2.

  2. Click anywhere on the Data View Web Part. FrontPage will display the Data View Options icon as shown in Figure 15-7. Click on the icon, and select Conditional Formatting... from the dropdown menu. FrontPage opens the Conditional Formatting task pane.

Figure 15-7. Clicking on the Data View Options icon displays a dropdown menu from which you can select Conditional Formatting
  1. Back on the Data View, select a row in the grid by clicking in the left-hand margin of the row.

  2. Click on the Create button in the Conditional Formatting task pane and select Apply Formatting from the dropdown menu. FrontPage displays the Condition Criteria dialog box.

  3. In the Condition Criteria dialog box, click on the top row to create a new condition. Under Field Name select GoalDistance. Select Greater Than Or Equal under Comparison and enter "10" under Value. The completed condition should look similar to the one shown in Figure 15-8. Click OK to finalize the condition.

Figure 15-8. The Condition Criteria dialog box
  1. FrontPage displays the Modify Style dialog box. Click the Format button and select Border... from the dropdown menu.

  2. At the Borders and Shading dialog box, click the Shading tab and select a yellow background color and click OK twice to dismiss the dialog box.

  3. FrontPage should highlight the rows where goal distance is greater than or equal to 10 miles.

  4. Select File Save to save the new page and select File Preview in Browser to display the page in your browser. The page should look similar to the one shown in Figure 15-9.

Figure 15-9. The completed page highlights all runners with goal distances of 10 or more miles

15.3.3 Discussion

If you look at the code behind the conditionally formatted Data View, you will see that the conditional formatting is applied using the following XSLT transformation:

<xsl:if test="@GoalDistance &gt;= '10'">background-color: #FFFF00;</xsl:if></xsl:

If you are savvy in XSLT you can tweak the XSLT code directly.

15.3.4 See Also

See Building XML Data-Driven Web Sites with FrontPage 2003.