Telerik Forums / UI for Silverlight Forum / GridView /

Setting row background colour (color)

Telerik UI for Silverlight
Resources Buy Try

28 posts, 0 answers

Greg Duffield

38 posts

Member since:
Feb 2006

Posted 29 Apr 2009 Link to this post

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

Pavel Pavlov
Admin

2039 posts

Posted 01 May 2009 Link to this post

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.
Virendra

50 posts

Member since:
Aug 2012

Posted 08 May 2009 Link to this post

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
Greg Duffield

38 posts

Member since:
Feb 2006

Posted 08 May 2009 Link to this post

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
Virendra

50 posts

Member since:
Aug 2012

Posted 11 May 2009 Link to this post

Thanks Greg

I thought it should work for Column in same fashion.

thanks
virendra
Michele

426 posts

Member since:
Jun 2009

Posted 02 Jul 2009 Link to this post

so I can't have a cell painted on row loaded? mean by code...
Rossen Hristov
Admin

2477 posts

Posted 03 Jul 2009 Link to this post

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.
Martin

8 posts

Member since:
Aug 2009

Posted 10 Aug 2009 Link to this post

Hi

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

Regards
Martin
Vlad
Admin

11100 posts
Posted 12 Aug 2009 Link to this post

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.

silverlightapplication2.zip
Martin

8 posts

Member since:
Aug 2009

Posted 12 Aug 2009 Link to this post

Thanks

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

Regards
Martin
Vlad
Admin

11100 posts

Posted 12 Aug 2009 Link to this post

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.
Martin

8 posts

Member since:
Aug 2009

Posted 12 Aug 2009 Link to this post

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
Vlad
Admin

11100 posts
Posted 12 Aug 2009 Link to this post

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.

silverlightapplication2.zip
Martin

8 posts

Member since:
Aug 2009

Posted 13 Aug 2009 Link to this post

Hi Vlad

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

Regards
Martin
Missing user
Posted 14 Aug 2009 Link to this post

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.

143701-silverlightapplication-sl2.zip
Martin

8 posts

Member since:
Aug 2009

Posted 18 Aug 2009 Link to this post

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
Missing user
Posted 18 Aug 2009 Link to this post

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.

143701-silverlightapplication2-sl2.zip
Hakki

47 posts

Member since:
Sep 2012

Posted 23 May 2013 Link to this post

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();

        }

    }
Dimitrina
Admin

3769 posts

Posted 24 May 2013 Link to this post

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.
Hakki

47 posts

Member since:
Sep 2012

Posted 24 May 2013 Link to this post

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.
Dimitrina
Admin

3769 posts

Posted 24 May 2013 Link to this post

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.
Hakki

47 posts

Member since:
Sep 2012

Posted 24 May 2013 Link to this post

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?
Dimitrina
Admin

3769 posts
Posted 28 May 2013 Link to this post

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.

RadGridView-SL5-AR-1.zip
Hakki

47 posts

Member since:
Sep 2012

Posted 28 May 2013 Link to this post

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?
Vanya Pavlova
Admin

2019 posts

Posted 28 May 2013 Link to this post

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.
Hakki

47 posts

Member since:
Sep 2012

Posted 28 May 2013 Link to this post

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.
Vanya Pavlova
Admin

2019 posts

Posted 28 May 2013 Link to this post

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.
Hakki

47 posts

Member since:
Sep 2012

Posted 28 May 2013 Link to this post

Gotcha. And thanks a lot for the informative reply, much appreciated.

Have a nice day,
Hakki

Setting row background colour (color)

Greg Duffield

Pavel Pavlov

Virendra

Greg Duffield

Virendra

Michele

Rossen Hristov

Martin

Vlad

Martin

Vlad

Martin

Vlad

Martin

Missing user

Martin

Missing user

Hakki

Dimitrina

Hakki

Dimitrina

Hakki

Dimitrina

Hakki

Vanya Pavlova

Hakki

Vanya Pavlova

Hakki