GridView - conditional row styling

[Jason Nguyen]

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.

[Veselin Vasilev]

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

[Jason Nguyen]

Hey Veskoni, thanks for the quick reply!  I now have conditional row styling working!

[Jason Nguyen]

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

[Pavel Pavlov]

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

[Jason Nguyen]

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

[Veselin Vasilev]

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

[Veselin Vasilev]

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

[Brian]

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>

[Veselin Vasilev]

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

[Yaroslav]

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?

[Maya]

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

[Bryce]

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

[Bryce]

[edit] double post due to server problem

[Bryce]

[edit] triple post due to server problem

[Maya]

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

[Bryce]

Thanks Maya, that worked.

Bryce