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

Setting row background colour (color)

27 Answers 559 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Greg Duffield
Top achievements
Rank 1
Greg Duffield asked on 29 Apr 2009, 09:31 PM
I thought that I would post this as I went round in circles for a while before realising how simple it is to set the background color for a row based on the state of the datacontext.

Now I am not saying that this is the best or cleanest approach but it is simple and works.

Bind the GridView RowLoaded event.

Then check that the e.Row is not a GridViewRowHeader or GridViewRowNew, then you can set the e.Row,Background to any brush/color you want as below:-
private void grd_RowLoaded(object sender, Telerik.Windows.Controls.GridView.RowLoadedEventArgs e)  
        {  
            if (e.Row is GridViewHeaderRow || e.Row is GridViewNewRow)  
                return;  
 
            if (e.DataElement != null)  
            {  
                DataPoint dp = (DataPoint)e.DataElement;  
                if (dp.Reason == "Active Report")  
                    e.Row.Background = new SolidColorBrush(Colors.Green);  
                if (dp.Reason == "Sleep Report")  
                    e.Row.Background = new SolidColorBrush(Colors.Red);  
            }  
        } 

Simple really

Greg

27 Answers, 1 is accepted

Sort by
0
Pavel Pavlov
Telerik team
answered on 01 May 2009, 08:59 AM
Hi Greg ,

Thanks for using our controls! Your approach is indeed a good one as it involves just a few lines of code. If anyone stumbles upon similar issue I'll definitely link him to this post.

Another alternative would be to play with the row template and bind a Border background to the "Reason" property of your business object via value converter. However it will involve much more XAML and CS code.

Kind regards,
Pavel Pavlov
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
Virendra
Top achievements
Rank 1
answered on 08 May 2009, 10:14 AM
Hi,
when i m doing this

this.Columns["CompanyName"].Background  = new SolidColorBrush(Colors.Yellow);
Nothing is reflecting on screen. Backgroud remains same it was.

what is i m missing?

thanks
virendra
0
Greg Duffield
Top achievements
Rank 1
answered on 08 May 2009, 11:31 AM
In my example I am setting the background color to the row and this is happening in the row loaded event.

From the looks of your code, you are trying to set the background color for a column, which from my knoweldge will not work from here and you would need to implemnet via a style manager  (there my well be another even that you could consume)

Thanks

Greg
0
Virendra
Top achievements
Rank 1
answered on 11 May 2009, 06:23 AM
Thanks Greg

I thought it should work for Column in same fashion.

thanks
virendra
0
Michele
Top achievements
Rank 2
answered on 02 Jul 2009, 03:39 PM
so I can't have a cell painted on row loaded? mean by code...
0
Rossen Hristov
Telerik team
answered on 03 Jul 2009, 09:04 AM
Hello Paolo,

I have tried to explain how to paint a cell based on its value in this forum thread. There is also a sample project attached there. I hope it helps.

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.
0
Martin
Top achievements
Rank 1
answered on 10 Aug 2009, 06:27 AM
Hi

What if I am using ChildTableDefinitions and I want to set the background colour on the GridViewExpandableRow?

Regards
Martin
0
Vlad
Telerik team
answered on 12 Aug 2009, 11:28 AM
Hello Martin,

I've attached small example to illustrate you how to achieve this.

Sincerely yours,
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
Martin
Top achievements
Rank 1
answered on 12 Aug 2009, 11:52 AM
Thanks

But I want to set the colour for each row or cell(depending on a certain criterias) in the expandable gridview

Regards
Martin
0
Vlad
Telerik team
answered on 12 Aug 2009, 12:32 PM
Hello Martin,

In my example you can use row.Cells for desired values and set desired properties. You can also use directly e.Row.DataContext to check various properties.

Greetings,
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
Martin
Top achievements
Rank 1
answered on 12 Aug 2009, 12:43 PM
Sorry if I am being unclear.
But want to style the rows and cells of "child" gridview on the fly, the gridview inside the main gridview so to speak.

Thanks
Martin
0
Vlad
Telerik team
answered on 12 Aug 2009, 12:52 PM
Hello Martin,

I've attached modified version of my project to illustrate you how to achieve this.

Kind regards,
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
Martin
Top achievements
Rank 1
answered on 13 Aug 2009, 12:18 PM
Hi Vlad

I am couldn't load your solution, I am currently using Silverlight v.2 for this project.

Regards
Martin
0
Missing User
answered on 14 Aug 2009, 01:20 PM
Hi Martin,

Please find the same sample application for Silverlight 2 attached.

All the best,
Anastasia
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
Martin
Top achievements
Rank 1
answered on 18 Aug 2009, 11:16 AM

I get a runtime error, it looks like it's still a version 3 solution
 
AG_E_PARSER_UNKNOWN_TYPE [Line: 18 Position: 78]

Regards
Martin
0
Missing User
answered on 18 Aug 2009, 12:12 PM
Hi Martin,

Are you using our SP1 binaries: http://www.telerik.com/account/free-trials/single-trial.aspx?pmvid=2079
SL2 DLLs only (zip, 4820 KB)  ?

I'm attaching the sample application again with our latest official binaries included.
Please run the project at your side and let me know if  there is still a problem.

All the best,
Anastasia
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
Hakki
Top achievements
Rank 1
answered on 23 May 2013, 05:49 PM
Hello,

I am successfully applying background colour using a converter class and it all works fine, HOWEVER. It has the default theme applied on the far left column and when being hovered over. And it really messes up the look.

This screen shows what I mean:  http://i230.photobucket.com/albums/ee248/masteratt/gridThemeProb.png


Can someone PLEASE tell me how to get those parts to use the desired theme? Thanks!

For reference, here is my XAML code (as you can see I stuck the desired theme everywhere, to no avail):

<telerik:RadGridView.RowStyle>
    <Style TargetType="telerik:GridViewRow" telerik:StyleManager.Theme="Expression_Dark">
        <Setter Property="Background" Value="{Binding IsLockedView,Converter={StaticResource IsFrozenColour}}"
                telerik:StyleManager.Theme="Expression_Dark"></Setter>
    </Style>
</telerik:RadGridView.RowStyle>


My Converter code:

public class FreezeToColourConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            var isFrozen = (string)value;
 
            return isFrozen == "1" ? new SolidColorBrush(Colors.Blue) : null;
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
0
Dimitrina
Telerik team
answered on 24 May 2013, 12:36 PM
Hello,

You can hide this part setting the "RowIndicatorVisibility" property of the RadGridView to False. 

Let me know how this works for you.

Regards,
Didie
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Hakki
Top achievements
Rank 1
answered on 24 May 2013, 12:57 PM
Hello,

Thanks that worked great for the RowIndicator being out of theme but the hover over graphics (or whatever the correct term may be) still appears in default theme instead of the desired theme.

Please check this image again for further details (to clarify, we solved the left red arrow, but not the right red arrow):

http://i230.photobucket.com/albums/ee248/masteratt/gridThemeProb.png

Please advise on how to get that to match my desired theme.
0
Dimitrina
Telerik team
answered on 24 May 2013, 01:52 PM
Hello,

Have you set the ExpressionDark Theme for the RadGridView? You can check this online demo on how the default GridView appearance is when this theme is set.

Regards,
Didie
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Hakki
Top achievements
Rank 1
answered on 24 May 2013, 01:54 PM
Hello,

Yes of course. As you can see from the image the theme is applied to every part of the grid except the mouse over highlight style.

Keep in mind I am using this grid in conjunction with a rowstyle which might mess it up (even though the rowstyle also has Expression_Dark set).
My code can be seen above.

What else can I try?
0
Dimitrina
Telerik team
answered on 28 May 2013, 12:57 PM
Hi,

I have attached my test project as I am not able to reproduce the problem you have at my end. Would you please check it and modify the solution accordingly so that I could observe the issue?

Regards,
Didie
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Hakki
Top achievements
Rank 1
answered on 28 May 2013, 02:48 PM
This is very very crazy.

I have boiled down the code to just this:

<telerik:RadGridView Grid.Row="0"
                             Name="clubsGrid"
                             ItemsSource="{Binding Clubs}"
                             AutoGenerateColumns="True"
                             Margin="5">
            <telerik:RadGridView.RowStyle>
                <Style TargetType="telerik:GridViewRow" telerik:StyleManager.Theme="Expression_Dark">
                </Style>
            </telerik:RadGridView.RowStyle>
        </telerik:RadGridView>

Only thing changing being the ItemsSource bind value and my grid is still stuck at default theme :/ While yours uses the theme. I have tried other themes as well but alas, to no avail.

FYI: Data is fine in both cases.

My Code just in case:
<telerik:RadGridView Grid.Row="0"
                     Name="ClubsGrid"
                     ItemsSource="{Binding Rdes}"
                     AutoGenerateColumns="True"
                     Margin="5">
    <telerik:RadGridView.RowStyle>
        <Style TargetType="telerik:GridViewRow" telerik:StyleManager.Theme="Expression_Dark">
        </Style>
    </telerik:RadGridView.RowStyle>
</telerik:RadGridView>


I have also upgraded the Telerik controls (inc. references), cleaned, rebuilt the project - Still nothing. Please note I am using the theme successfully in other parts of the project.

Unfortunately I can not send my code as the project is too large but: Other than that XAML code, are there any steps to be taken for this to work?
0
Vanya Pavlova
Telerik team
answered on 28 May 2013, 03:07 PM
Hi Hakki,


In the world of Silverlight you should base the simple style targeted at GridViewRow on the current theme, as follows:

<telerik:RadGridView telerik:StyleManager.Theme="Expression_Dark" ItemsSource="{Binding Collection}">
            <telerik:RadGridView.RowStyle>
                <Style TargetType="telerik:GridViewRow" telerik:StyleManager.BasedOn="Expression_Dark">
                    <Setter Property="Background" Value="Yellow"/>
                    </Style>
                </telerik:RadGridView.RowStyle>
            </telerik:RadGridView>

Regards,
Vanya Pavlova
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Hakki
Top achievements
Rank 1
answered on 28 May 2013, 03:14 PM
Hello Vanya,

Thank you, that solved it.

However I am still most curious how it worked on your colleague's example project above where '.BasedOn' wasn't used but the theme was still being applied correctly.
0
Vanya Pavlova
Telerik team
answered on 28 May 2013, 03:34 PM
Hello Hakki,



The example of my colleague corresponds to the snippet you provided. The main difference between these examples is that she is setting the theme at application level. When you set the theme at element level you get the default theme of GridViewRow, because the style is not correctly resolved and fallbacks to the default Office_Black theme. I strongly recommend you to use the approach I have already suggested, no matter how you set the theme either at application level or at element level.  



Regards,
Vanya Pavlova
Telerik

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Hakki
Top achievements
Rank 1
answered on 28 May 2013, 04:40 PM
Gotcha. And thanks a lot for the informative reply, much appreciated.

Have a nice day,
Hakki
Tags
GridView
Asked by
Greg Duffield
Top achievements
Rank 1
Answers by
Pavel Pavlov
Telerik team
Virendra
Top achievements
Rank 1
Greg Duffield
Top achievements
Rank 1
Michele
Top achievements
Rank 2
Rossen Hristov
Telerik team
Martin
Top achievements
Rank 1
Vlad
Telerik team
Missing User
Hakki
Top achievements
Rank 1
Dimitrina
Telerik team
Vanya Pavlova
Telerik team
Share this question
or