Setting row background colour (color)

28 posts, 0 answers
  1. Greg Duffield
    Greg Duffield avatar
    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
  2. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    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.
  3. DevCraft banner
  4. Virendra
    Virendra avatar
    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
  5. Greg Duffield
    Greg Duffield avatar
    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
  6. Virendra
    Virendra avatar
    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
  7. Paolo
    Paolo avatar
    423 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...
  8. Rossen Hristov
    Admin
    Rossen Hristov avatar
    2478 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.
  9. Martin
    Martin avatar
    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
  10. Vlad
    Admin
    Vlad avatar
    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.
  11. Martin
    Martin avatar
    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
  12. Vlad
    Admin
    Vlad avatar
    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.
  13. Martin
    Martin avatar
    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
  14. Vlad
    Admin
    Vlad avatar
    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.
  15. Martin
    Martin avatar
    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
  16. Missing user
    Missing user avatar

    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.
  17. Martin
    Martin avatar
    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
  18. Missing user
    Missing user avatar

    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.
  19. Hakki
    Hakki avatar
    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();
            }
        }
  20. Dimitrina
    Admin
    Dimitrina avatar
    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.

  21. Hakki
    Hakki avatar
    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.
  22. Dimitrina
    Admin
    Dimitrina avatar
    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.

  23. Hakki
    Hakki avatar
    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?
  24. Dimitrina
    Admin
    Dimitrina avatar
    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.

  25. Hakki
    Hakki avatar
    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?
  26. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    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.

  27. Hakki
    Hakki avatar
    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.
  28. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    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.

  29. Hakki
    Hakki avatar
    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
Back to Top
DevCraft banner