Using Conditional Formatting in the XamWebGrid

[Infragistics] Kiril Matev / Wednesday, June 09, 2010

Users are not content with just looking at the data anymore, they want to have as much data analysis done automatically and presented together with the data, so they can quickly interpret and act upon this information. Maybe the simplest form of data analysis you can do as part of your application is conditional formatting of records in a grid control – basically, this allows you to apply specific appearances to cells whose values match certain conditions. So what are the conditional formatting capabilities of the XamWebGrid?

Please download this sample project demonstrating how to use conditional formatting in the XamWebGrid. It was built using a trial pre-release build of our upcoming 10.2 release of the XamWebGrid. The project was built using Visual Studio 2010, targeting Silverlight 4. Please download and open the project, and follow the code as we go along.

Here’s a screenshot of the main view:

Enabling conditional formatting

Enabling conditional formatting requires setting the AllowConditionalFormatting property of the ConditionalFormattingSettings object to True.

Conditional formatting rules

Conditional formatting rules are added to the ConditionalFormatCollection on the column level, as shown in the segment below:

 

<igGrid:TextColumn Key="YTDActualDollarSales" HeaderText="Sales Volume" HorizontalContentAlignment="Right" IsSummable="False" IsSortable="False">

          <igGrid:TextColumn.ConditionalFormatCollection>

                        <igGrid:LessThanConditionalFormatRule Value="5000" StyleToApply="{StaticResource orangeStyle}" />

                        <igGrid:GreaterThanConditionalFormatRule Value="50000" StyleToApply="{StaticResource greenStyle}" />

          </igGrid:TextColumn.ConditionalFormatCollection>

</igGrid:TextColumn>

The code segment above defines two conditional formatting rules, the first one of them applying the orangeStyle style to cells where the value is less than 5000, and the second one applying the greenStyle style to cells where the value is greater than 50,000. Now that we've covered the basics, let's look at the other conditional formatting rules we can use.

Types of conditional formatting rules

There are two types of conditional formatting rules – numeric and boolean. The numeric rules allow you to format a cell based on intervals in which the cell value falls in. Please take a look at the full list of conditional formatting rules supported by the XamWebGrid, and see whether they fit your scenario.

The numeric conditional formatting rules used in this sample are:

 

The boolean conditional formatting rules used in this sample are:

 

The colored progress bar is not a part of the standard conditional formatting rules. It is a standard toolbox control that has its color modified to allow your end users to quickly interpret a value. The color of the progress bar is set using a converter, which returns a Color value depending on the interval the cell value falls in. You can take a look at the implementation of this logic in the ColorConvertor class.

Summary

We looked at how the XamWebGrid allows you to enrich your data, and help your users make sense of it quickly using conditional formatting rules. Consult with the users of your application and ask them how they analyze data. You can then use this sample project and our help resources to implement these rules, and increase the value of your applications to your end users.

If you have any questions, do not hesitate to email me at kmatev@infragistics.com