Conditional styles and templates with RadGridView for Silverlight and WPF

by Vladimir Enchev | Comments 10

I’m happy to announce that with our upcoming Q1 2010 Service Pack 1 (middle of April) you will be able to apply conditionally styles and templates for RadGridView easily using DataTemplateSelectors and StyleSelectors for both Silverlight and WPF:

image

You can test the new functionally with our upcoming latest internal build this Friday and in the meantime here is an example:

XAML

<Grid x:Name="LayoutRoot">
<
Grid.Resources>
<
local:MyStyleSelector x:Key="styleSelector" />
<
local:MyDataTemplateSelector x:Key="templateSelector" />
</
Grid.Resources>
<
telerik:RadGridView AutoGenerateColumns="False" ItemsSource="{Binding}" RowStyleSelector="{StaticResource styleSelector}">
<
telerik:RadGridView.Columns>
<
telerik:GridViewDataColumn DataMemberBinding="{Binding ID}" CellTemplateSelector="{StaticResource templateSelector}" />
</
telerik:RadGridView.Columns>
</
telerik:RadGridView>
</
Grid>
 
 

C#

public class MyStyleSelector : StyleSelector
{
public override Style SelectStyle(object item, DependencyObject container)
{
var style = style = new Style(typeof(GridViewRow));

var row = (GridViewRow)container;
var obj = (MyObject)item;

if (obj.ID > 50)
{
style.Setters.Add(new Setter(GridViewRow.BackgroundProperty, new SolidColorBrush(Colors.Red)));
}
else
{
style.Setters.Add(new Setter(GridViewRow.BackgroundProperty, new SolidColorBrush(Colors.Blue)));

}

return style;
}
}

public class MyDataTemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
var template = base.SelectTemplate(item, container);

var cell = (GridViewCell)container;
var obj = (MyObject)item;

if (obj.ID > 50)
{
template = (DataTemplate)XamlReader.Load(
@"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">
<TextBlock Text=""{Binding ID}"" />
</DataTemplate>"
);
}
else
{
template = (DataTemplate)XamlReader.Load(
@"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">
<TextBox Text=""{Binding ID}"" />
</DataTemplate>"
);
}

return template;
}
}
New properties are:

GridViewColumn
- CellTemplateSelector
- CellEditTemplateSelector
- ToolTipTemplateSelector
- GroupHeaderTemplateSelector
- GroupFooterTemplateSelector
- CellStyleSelector
- GroupFooterCellStyleSelector

GridViewDataControl
- RowDetailsTemplateSelector
- HierachyChildTemplateSelector
- RowStyleSelector
- AlternateRowStyleSelector
- GroupRowStyleSelector
- GroupFooterRowStyleSelector
- RowDetailsStyleSelector

Important: If you set respective Style or DataTemplate property (for example CellStyle/CellStyleSelector) the Style/DataTemplate selector will not be applied!

Enjoy!

,
Senior Technical Architect

10 Comments

Glen
Did this get into SP1?

The notes here: http://www.telerik.com/versionnotes.aspx?id=2203  do not mention this...

Glen
Marc Roussel
I see you have 2 classes and each one have override.  That's fine but I don't see you explaining how these are used and in which scenario.

Let say my Grid do not have any style applied.  How do I just change a cell background based on this ?
Actually I'm able to perform any change in the style of a row by using the RowLoaded and changing anything works.

Vlad
RowLoaded will not work properly in case of horizontal virtualization - let's say you have 100 columns and you want to change 78 column cell style. The grid will not create UI elements outside of view! You can check MSDN for more info about style and template selectors:
http://msdn.microsoft.com/en-us/library/system.windows.controls.styleselector.aspx
http://msdn.microsoft.com/en-us/library/system.windows.controls.datatemplateselector.aspx

And our demos:
http://demos.telerik.com/silverlight/#GridView/Selectors/DataTemplateSelectors/CellTemplateSelector
http://demos.telerik.com/silverlight/#GridView/Selectors/StyleSelectors/CellStyleSelector
Charles Nelson
I see that this all works fine when the application loads but as the data changes, the styles are not changing. Perhaps you have some suggestions as to why this is happening. 


 
Aviv

When you writing var obj = (MyObject)item; . What do you mean about MyObject? What is it?


Teddy

When you writing var obj = (MyObject)item; . What do you mean about MyObject? What is it?


Jake
I'm also running into the same issue with the style not changing when the underlying data is updated. Any idea on how we can get around this issue?
Vojtech Babic
gridView.Rebind()

Comments

  1.    
      
      
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)
Read more articles by Vladimir Enchev - or - read latest articles in Developer Tools


Follow vladimir_enchev on Twitter


Product Families