GridView - conditional row styling

17 posts, 1 answers
  1. Jason Nguyen
    Jason Nguyen avatar
    14 posts
    Member since:
    May 2010

    Posted 07 Jul 2010 Link to this post

    I have a GridView that I am loading data into.  I am validating the data and as a column in the grid I display the validation status to the user.  Based off the validation status, I want to change the row styling; thus, I want to implement conditional row styling.

    I have been looking at the GridView Styling Rows demo (http://demos.telerik.com/silverlight/#GridView/Selectors/StyleSelectors/RowStyleSelector), which I find very helpful.  But I would like to know what is going on in the UnitPriceConverter and ConditionalStyleSelector so that I can try to implement something similar.

    Thanks in advance.
  2. Answer
    Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 07 Jul 2010 Link to this post

    Hello Jason Nguyen,

    You can find those files under

    <RadControls install folder> \ Demos \ Examples \ GridView \ Selectors \ StyleSelectors

    For your convenience I have attached the files here as well.

    Hope this helps.

    Regards,
    Veskoni
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Jason Nguyen
    Jason Nguyen avatar
    14 posts
    Member since:
    May 2010

    Posted 07 Jul 2010 Link to this post

    Hey Veskoni, thanks for the quick reply!  I now have conditional row styling working!
  5. Jason Nguyen
    Jason Nguyen avatar
    14 posts
    Member since:
    May 2010

    Posted 07 Jul 2010 Link to this post

    Veskoni,
    Do you know how I might get the row styling to update as necessary? 

    For example:
            Let's say I have two conditional styles I am applying.  These are based off of a field called ValidationStatus on the object.
            An object loads with the first conditional style.  The user then causes the ValidationStatus to change, how do I then get the second conditional style to be applied?

    Thanks
  6. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 07 Jul 2010 Link to this post

    Hi Jason Nguyen,

    The following should work :
    Implement the INotifyPropertyChanged interface for your business object.

    In the setter of ValidationStatus property - raise the PropertyChanged event. This way RadGridView should sense changes and update the UI automatically.

    Kind regards,
    Pavel Pavlov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Jason Nguyen
    Jason Nguyen avatar
    14 posts
    Member since:
    May 2010

    Posted 07 Jul 2010 Link to this post

    Thanks Pavel, but I was already doing that so that as ValidationStatus changed the user would know.  So although ValidationStatus is changing in the UI, the row styling is not
  8. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 09 Jul 2010 Link to this post

    Hello Jason Nguyen,

    Actually, the SelectStyle is not applied automatically when you change the data even if the class implements the INotifyPropertyChange interface. We will check that and fix it.

    In the mean time you can try to call the Rebind() method of the gridview for the row style selector to be applied after the data has changed.

    Kind regards,
    Veskoni
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 09 Jul 2010 Link to this post

    Hi Jason Nguyen,

    You can use an alternative approach - ValueConverter as described in this blog post:

    Adding additional power to RadGridView for Silverlight with attached behaviors

    Sincerely yours,
    Veskoni
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Brian
    Brian avatar
    19 posts
    Member since:
    Aug 2010

    Posted 24 Sep 2010 Link to this post

    We applied the conditional styling like int he demo and it works as expected except when the user selects a row, those cells do not get the row selection highlights. How can we still keep that while having conditional formating.

    Our conditional format changes the cell's background color yellow if undervalue, white if OK value, and red if overvalue.

    Thanks for the pointer


    <local:DateConverter x:Key="dateconverter"></local:DateConverter>
               <Style x:Key="UpperLimitStyle" TargetType="telerik:GridViewCell">
                   <Setter Property="Background" Value="Red" />
               </Style>
               <Style x:Key="LowerLimitStyle" TargetType="telerik:GridViewCell" >
                   <Setter Property="Background" Value="Yellow" />
               </Style>
               <Style x:Key="NormalStyle" TargetType="telerik:GridViewCell" >
                   <Setter Property="Background" Value="White" />
               </Style>
               <local:HourLimitConverterCol1 x:Key="converterCol1" />
               <local:ConditionalStyleSelector x:Key="selectorCol1" ConditionConverter="{StaticResource converterCol1}">
                   <local:ConditionalStyleSelector.Rules>
                       <local:ConditionalStyleRule Style="{StaticResource UpperLimitStyle}">
                           <local:ConditionalStyleRule.Value>
                               <sys:String>U</sys:String>
                           </local:ConditionalStyleRule.Value>
                       </local:ConditionalStyleRule>
                       <local:ConditionalStyleRule Style="{StaticResource LowerLimitStyle}">
                           <local:ConditionalStyleRule.Value>
                               <sys:String>L</sys:String>
                           </local:ConditionalStyleRule.Value>
                       </local:ConditionalStyleRule>
                       <local:ConditionalStyleRule Style="{StaticResource NormalStyle}">
                           <local:ConditionalStyleRule.Value>
                               <sys:String>N</sys:String>
                           </local:ConditionalStyleRule.Value>
                       </local:ConditionalStyleRule>
                   </local:ConditionalStyleSelector.Rules>
               </local:ConditionalStyleSelector>
  11. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 28 Sep 2010 Link to this post

    Hi Brian,

    Do you reproduce the problem on our online demo?
    Attaching a sample project (in a new support ticket) would help us identify the problem easily.


    Best wishes,
    Veselin Vasilev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. Yaroslav
    Yaroslav avatar
    15 posts
    Member since:
    Feb 2011

    Posted 09 Mar 2011 Link to this post

    Hello
    I have problem with style selcting. I've done it similar to demo. I applied Vista theme (telerik:Teming.Theme = "Vista") to grid view. When I also appliing this Style, headers of my grid still in Vista theme, but for rows it becom Office_Black (when mous over the row it becoms oranged instead of blue). Where is the problem could be?
  13. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 10 Mar 2011 Link to this post

    Hello Yaroslav,

    Based on the main topic in this thread, I get the impression that in case you use a StyleSelector as well as set a Theme for the grid, the mouse-over state of the row is not of the style you expect it to be ? Is my understanding on the issue correct ? 
    I have tried to reproduce this very case, but I was not able to. Please take a look the project I used for testing and let me know in case of any discrepancies according to your scenario.
     

    Regards,
    Maya
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  14. Bryce
    Bryce avatar
    32 posts
    Member since:
    Aug 2010

    Posted 12 Dec 2011 Link to this post

    Hi Maya,

    I am having the same problem as Yaroslav. I have the metro theme applied to my RadGridView, along with a RowStyleSelector, and whenever I hover over a row in the grid I get the Office_Black theme (yellow/orange) instead of the Metro theme. Here is my code:

    <telerik:RadGridView x:Name="tasksRadGridView"
                                 SelectedItem="{Binding SelectedTask, Mode=TwoWay}"
                                 ItemsSource="{Binding Tasks}"
                                 Style="{StaticResource TasksGridViewStyle}">
                <telerik:RadGridView.RowStyleSelector>
                    <Skins:IsCompletedTaskStyle x:Name="IsCompletedTaskStyle">
                        <Skins:IsCompletedTaskStyle.Complete>
                            <Style TargetType="telerik:GridViewRow">
                                <Setter Property="Background" Value="White"/>
                                <Setter Property="telerik:StyleManager.Theme" Value="Metro" />
                            </Style>
                        </Skins:IsCompletedTaskStyle.Complete>
                        <Skins:IsCompletedTaskStyle.Incomplete>
                            <Style TargetType="telerik:GridViewRow">
                                <Setter Property="Background" Value="#EA7077" />
                                <Setter Property="telerik:StyleManager.Theme" Value="Metro" />
                            </Style>
                        </Skins:IsCompletedTaskStyle.Incomplete>
                    </Skins:IsCompletedTaskStyle>
                </telerik:RadGridView.RowStyleSelector>
    </telerik:RadGridView>

    <Style x:Key="TasksGridViewStyle" TargetType="telerik:RadGridView">
            <Setter Property="Grid.Row" Value="2" />
            <Setter Property="Margin" Value="0 0 0 10" />
            <Setter Property="IsReadOnly" Value="True"/>
            <Setter Property="IsFilteringAllowed" Value="False"/>
            <Setter Property="AutoGenerateColumns" Value="False"/>
            <Setter Property="CanUserFreezeColumns" Value="False" />
            <Setter Property="ShowGroupPanel" Value="False" />
            <Setter Property="RowIndicatorVisibility" Value="Collapsed" />
            <Setter Property="telerik:StyleManager.Theme" Value="Metro" />
        </Style>


    public class IsCompletedTaskStyle: StyleSelector
        {
            public override Style SelectStyle(object item, DependencyObject container)
            {
                if (item is IActivityViewModel)
                {
                    IActivityViewModel activity = item as IActivityViewModel;
                    if (activity.IsTaskActive())
                    {
                        return Incomplete;
                    }
                    return Complete;
                }
                return base.SelectStyle(item, container);;
            }
            public Style Complete { get; set; }
            public Style Incomplete { get; set; }
        }

    I downloaded the application you uploaded, but it was for CellStyleSelector.

    Thanks,
    Bryce
  15. Bryce
    Bryce avatar
    32 posts
    Member since:
    Aug 2010

    Posted 12 Dec 2011 Link to this post

    [edit] double post due to server problem
  16. Bryce
    Bryce avatar
    32 posts
    Member since:
    Aug 2010

    Posted 12 Dec 2011 Link to this post

    [edit] triple post due to server problem
  17. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 13 Dec 2011 Link to this post

    Hello Bryce,

    You can define the styles for GridViewRow as follows:

    <my:StadiumCapacityStyle.IsChampionStyle>
                    <Style TargetType="telerik:GridViewRow" telerik:StyleManager.BasedOn="Metro">
                        <Setter Property="Background" Value="White"/>
                         
                    </Style>
                </my:StadiumCapacityStyle.IsChampionStyle>
                <my:StadiumCapacityStyle.NotAChampionStyle>
                    <Style TargetType="telerik:GridViewRow" telerik:StyleManager.BasedOn="Metro">
                        <Setter Property="Background" Value="#EA7077" />
                    </Style>
                </my:StadiumCapacityStyle.NotAChampionStyle>
     
    I am attaching a sample project illustrating the suggested approach.

    Greetings,
    Maya
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  18. Bryce
    Bryce avatar
    32 posts
    Member since:
    Aug 2010

    Posted 13 Dec 2011 Link to this post

    Thanks Maya, that worked.

    Bryce
Back to Top
DevCraft banner