Binding a cell's colors

[GEB]

I'm successfully binding data contained in a collection to a RadGridView.  I am also creating the columns and the binding in the code-behind, rather than auto-generating the columns.  In my collection, I have the color (background and foreground) of the cell that I desire, as well as the data.  Is there a way to bind the foreground/background colors as well as the data that is in each of the RadGridView cells?

[Hristo Deshev]

Hi GEB,

Binding to color properties on your data objects to display cells with a different background and foreground color is certainly possible. You have to use your own column CellStyle and change the cell template. Assuming your data object's properties are named Background and Foreground respectively, to bind the background property you need to change the outer <Border> element Background property binding to Background="{Binding Background}". Handling text foreground would require you to change the default cell content presenter to a ContentControl and bind its Foreground property: Foreground="{Binding Foreground}". Here's the complete style:

<Style x:Key="cellColorStyle" TargetType="GridView:GridViewCell">
    <Setter Property="Padding" Value="5,0,5,0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridView:GridViewCell">
                <Border
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{Binding Background}">
                    <Grid>
                        <ContentControl Name="PART_ContentPresenter"
                                  Visibility="Visible"
                                  Foreground="{Binding Foreground}"
                                  Margin="{TemplateBinding Padding}"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Stretch"
                                  Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        <ContentPresenter Name="PART_EditorPresenter"
                                  Visibility="Collapsed"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Stretch"
                                  Content="{x:Null}"/>
                    </Grid>

                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="EditingStates">
                            <vsm:VisualState x:Name="Edited">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EditorPresenter"
                                           Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter"
                                           Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Normal">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EditorPresenter"
                                           Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentPresenter"
                                           Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I am attaching a sample project to this thread as well.

Greetings,
Hristo Deshev
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.

[GEB]

Thank you for the quick response.  Your example is very helpful.

I have one follow up question.  In your example, you are creating the RadGridView columns in the XAML file.  In my application, I will be creating the columns in the code-behind.  In my code-behind, how do I set the CellStyle property for the desired columns to point to the Style?  I.e., CellStyle="{StaticResource cellColorStyle}" in the code-behind?

[GEB]

I'm still not able to bind the colors.  My XAML is exactly like your example, except that I do not create the columns in the XAML, but rather in the code-behind.  The data that is bound to the grid row contains properties for Background anf Foreground.  Here is how I create the the column where I want to bind the Background and Foreground colors:

  Telerik.Windows.Controls.GridViewDataColumn gridColumn = new Telerik.Windows.Controls.GridViewDataColumn();
 gridColumn.IsVisible = true;
 gridColumn.HeaderText = "Color";
 gridColumn.UniqueName = "Color";
 gridColumn.DataMemberBinding = false;
 gridColumn.IsSortable = false;
 gridColumn.IsFilterable = false;
 gridColumn.IsReadOnly = false;
 gridColumn.CellStyle = this.MyGrid.Resources["cellColorStyle"] as System.Windows.Style;

I can see where the CellStyle is being set properly, and I can see where the data is being bound to the Grid Row appropriately.  However, when the row is displayed in the grid, the background and foreground colors are not being displayed.  I have verified that the data being bound does have the Background and Foreground properties being set appropriately when I create the data.

[GEB]

Sorry, but I mistyped part of the sample code. DataMenberBinding is set to "Color" which contains the name of the color in the data collection.  All of my data is being displayed properly in the grid, but the "Color" column does not have the correct Background and Foreground colors set.

[GEB]

I have built your example project using the latest assemblies available for the CTP.  I had to change the XAML in order for it to execute with the new assemblies:

<telerikGrid:RadGridView.Columns>
    <telerikGrid:GridViewDataColumn UniqueName="Subject" CellStyle="{StaticResource cellColorStyle}" />
    <telerikGrid:GridViewDataColumn UniqueName="Size" CellStyle="{StaticResource cellColorStyle}" />
</telerikGrid:RadGridView.Columns>

In your example, the GridViewDataColumn was defined via GridView, and I had to change this to the telerikGrid assembly.

Using your example, and these latest CTP libraries, the example no longer works.  That most likely explains why my code-behind is not working.

I was unable to create a support ticket and upload my sample project because my support for the evaluation period has expired.  I would be more than happy to send you the sample project is you will let me know how to upload it.

[Hristo Deshev]

Hi GEB,

That's strange! I just modified my example to use the latest CTP and it seems to work just fine. Here's my C# code that creates the colum (binding to the Subject property in my test data):

Telerik.Windows.Controls.GridViewDataColumn gridColumn = new Telerik.Windows.Controls.GridViewDataColumn();
gridColumn.IsVisible = true;
gridColumn.HeaderText = "Subject";
gridColumn.UniqueName = "Subject";
gridColumn.DataMemberBinding = new Binding("Subject");
gridColumn.IsSortable = false;
gridColumn.IsFilterable = false;
gridColumn.IsReadOnly = false;
gridColumn.CellStyle = this.RadGridView1.Resources["cellColorStyle"] as System.Windows.Style;

this.RadGridView1.Columns.Add(gridColumn);

I am attaching a screenshot as well as my sample project. If the approach outlined in the project does not work, you can send me your code in a support ticket. My colleague Nick has extended your evaluation period and you should have no problem opening a ticket now.


Best wishes,
Hristo Deshev
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.

[GEB]

Thanks Hristo.  I am using the new assemblies that were sent to me via a support ticket last week.  I will send my test project with these new assemblies via a support ticket late today.  There will be two projects.  One will be where columns are created via the XAML file, and the other will be via code-behind.  I believe that the difference will be in these latest assemblies, in that my two projects are essentially identical to yours.

One more point to note.  I cannot build your project in my development environment.  I am running into an issue that was resolved a few weeks ago with new RadGridView assemblies.  It is caused by a runtime error revolving around the System.Windows.Data.dll not found.  If I use the latest assemblies from last week. my applications execute properly.  My guess is that the assemblies that you used in your example is older than my assemblies for the Grid, and something has been broken in the meantime.

Also, note that in my previous post, I had to change the XAML you posted for creating the grid columns.  The XAML in your sample project is also not compatible with the lastest assemblies.

I will send over my two projects late tonight.

[GEB]

Hristo, I have uploaded my sample projects via a support ticket.  The ticket number is 195458.  There are 2 projects in the zip file.  The first is your example using XAML to defines the grid columns.  The second project uses the code-behind to define the columns.  Note that using the assemblies I received last week that addressed several bugs in the RadGridView, the colors do not seem to be properly bound to the grid cells as they are in your example.

[Alex]

hi,
i have tried your way to change the content of gridcell color,it does works,but my page get this problem:

this cell i used that style have no gridline.i can't upload my image,so if you need that ,tell me.i can sent to you.
i just copy the style code in your project,changed nothing,i sew the difference with the image you uploaded.
Can you help me about this?

[Vlad]

Hi,

You can open support ticket and attach the image.

Best wishes,
Vlad
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.

[Alex]

ok,i will do it.

[xiaofeng]

But how to implement this by code behind.I just want to binding the cell's foreground by code-behind.I want to do all these at the code-behind,because my column is dynamic.I do not actually know the column name.?
Thank you

[Vlad]

Hello,

 The recommended approach with our latest versions is style selectors. This will work for both MVVM and code.

All the best,
Vlad
the Telerik team

[xiaofeng]

But It seems to be a silverlight 4 control.I am using silverlight 3.Does it support in silverlight 3?

[Vlad]

Hello,

Our Silverlight 3 support was discontinued last year. 

All the best,
Vlad
the Telerik team