This is a migrated thread and some comments may be shown as answers.

Binding a cell's colors

15 Answers 323 Views
GridView
This is a migrated thread and some comments may be shown as answers.
GEB
Top achievements
Rank 1
GEB asked on 27 Feb 2009, 07:52 PM
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?

15 Answers, 1 is accepted

Sort by
0
Hristo Deshev
Telerik team
answered on 03 Mar 2009, 10:31 AM
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.
0
GEB
Top achievements
Rank 1
answered on 04 Mar 2009, 01:50 PM
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?
0
GEB
Top achievements
Rank 1
answered on 05 Mar 2009, 01:14 AM

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.
0
GEB
Top achievements
Rank 1
answered on 05 Mar 2009, 01:16 AM
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.
0
GEB
Top achievements
Rank 1
answered on 05 Mar 2009, 02:15 AM
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.
0
Hristo Deshev
Telerik team
answered on 05 Mar 2009, 12:57 PM
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.
0
GEB
Top achievements
Rank 1
answered on 05 Mar 2009, 01:42 PM
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.
0
GEB
Top achievements
Rank 1
answered on 05 Mar 2009, 07:22 PM
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.
0
Alex
Top achievements
Rank 1
answered on 14 Sep 2009, 10:51 AM
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?
0
Vlad
Telerik team
answered on 17 Sep 2009, 06:05 AM
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.
0
Alex
Top achievements
Rank 1
answered on 18 Sep 2009, 01:01 AM
ok,i will do it.
0
xiaofeng
Top achievements
Rank 1
answered on 21 Mar 2011, 09:19 AM
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
0
Vlad
Telerik team
answered on 21 Mar 2011, 09:22 AM
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
0
xiaofeng
Top achievements
Rank 1
answered on 22 Mar 2011, 02:36 AM
But It seems to be a silverlight 4 control.I am using silverlight 3.Does it support in silverlight 3?
0
Vlad
Telerik team
answered on 22 Mar 2011, 08:12 AM
Hello,

Our Silverlight 3 support was discontinued last year. 

All the best,
Vlad
the Telerik team
Tags
GridView
Asked by
GEB
Top achievements
Rank 1
Answers by
Hristo Deshev
Telerik team
GEB
Top achievements
Rank 1
Alex
Top achievements
Rank 1
Vlad
Telerik team
xiaofeng
Top achievements
Rank 1
Share this question
or