Setting row background colour (color)

[Greg Duffield]

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]

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]

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]

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]

Thanks Greg

I thought it should work for Column in same fashion.

thanks
virendra

[Michele]

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

[Rossen Hristov]

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]

Hi

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

Regards
Martin

[Vlad]

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.

[Martin]

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]

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]

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]

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.

[Martin]

Hi Vlad

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

Regards
Martin

[Missing User]

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.

[Martin]

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]

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.

[Hakki]

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]

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

[Hakki]

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]

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

[Hakki]

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]

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

[Hakki]

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]

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

[Hakki]

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]

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

[Hakki]

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

Have a nice day,
Hakki