Using Conditional Formatting in the XamWebGrid

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?

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:

• TwoColorScaleConditionalFormatRule – set the cell background color between a MinimumColor and MaximumColor, based on where the cell value falls in the interval - MinimumValue and MaximumValue.
• IconConditionalFormatRule – sets an image to appear in the cell, based on which of the user-defined intervals the cell values falls in

 

The boolean conditional formatting rules used in this sample are:

• LessThanConditionalFormatRule – applies a specified style, if the cell value is less than a specified threshold value
• GreaterThanConditionalFormatRule – applies a specified style, if the cell value is greater than a specified threshold value

 

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