Converting an Enum row value to a graphical shape

[Dmitry]

I have a scenario where my first grid row value will always be an Enum, example values: Good, Bad, Warning.

As the rows are being created i need to switch from this enum to an Ellipse shape with a filled color of Green, Red, or Yellow depending on the enum. I tried to add code into the RowLoaded event and it works fine to detect the value, but when i set back to the Content property im getting an error.

Is there any good examples of this that i can use?

[Rossen Hristov]

Hello Dmitry,

To achieve this you will need to do several things. First, you have to modify the CellStyle of the column that will show the ellipse. You have to define a ControlTemplate for that cell. And finally you will need a value converter to do the conversion from enum to color. Here is the XAML that will do all of the above:

	<Window x:Class="Ticket207677_EnumToShapeColor.Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
	xmlns:local="clr-namespace:Ticket207677_EnumToShapeColor"
	Title="Window1" Height="300" Width="300">
	<Grid>
	<Grid.Resources>
	<local:StatusToFillConverter x:Key="statusToFillConverter" />
	<ControlTemplate x:Key="shapeCellTemplate" TargetType="{x:Type telerik:GridViewCell}">
	<Ellipse Stretch="Uniform" Margin="3" Fill="{Binding Status, Converter={StaticResource statusToFillConverter}}" />
	</ControlTemplate>
	<Style x:Key="shapeCellStyle">
	<Setter Property="telerik:GridViewCell.Template" Value="{StaticResource shapeCellTemplate}"/>
	</Style>
	</Grid.Resources>
	<telerik:RadGridView
	Name="RadGridView1"
	AutoGenerateColumns="False"
	ColumnsWidthMode="Auto">
	<telerik:RadGridView.Columns>
	<telerik:GridViewDataColumn
	HeaderText=""
	DataMemberBinding="{Binding Status}"
	CellStyle="{StaticResource shapeCellStyle}"
	Width="24"
	IsFilterable="False"/>
	<telerik:GridViewDataColumn
	HeaderText="Subject"
	DataMemberBinding="{Binding Subject}"
	/>
	</telerik:RadGridView.Columns>
	</telerik:RadGridView>
	</Grid>
	</Window>

The following code will replace the default contents of each cell with an ellipse and bind the ellipse's fill color to the value returned by the converter.

And here is the code for the converter:

	namespace Ticket207677_EnumToShapeColor
	{
	using System;
	using System.Globalization;
	using System.Windows;
	using System.Windows.Data;
	using System.Windows.Media;
	/// <summary>
	/// StatusToFillConverter
	/// </summary>
	class StatusToFillConverter : IValueConverter
	{
	public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
	{
	if (!(value is Status))
	throw new InvalidOperationException("The value must be a Status!");
	if (targetType != typeof(Brush))
	throw new InvalidOperationException("The target must be a Brush!");
	switch ((Status)value)
	{
	case Status.Good:
	return Brushes.Green;
	case Status.Bad:
	return Brushes.Red;
	case Status.Warning:
	return Brushes.Yellow;
	default:
	return SystemColors.ControlBrush;
	}
	}
	public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
	{
	throw new NotImplementedException();
	}
	}
	}

I have attached a small sample project that will get you started. Please, do not hesitate to contact us again if you have any other questions.

Kind regards,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Dmitry]

This worked great, thank you!