This is a migrated thread and some comments may be shown as answers.

GridView - conditional row styling

16 Answers 308 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Jason Nguyen
Top achievements
Rank 1
Jason Nguyen asked on 07 Jul 2010, 03:20 PM
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.

16 Answers, 1 is accepted

Sort by
0
Accepted
Veselin Vasilev
Telerik team
answered on 07 Jul 2010, 03:23 PM
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
0
Jason Nguyen
Top achievements
Rank 1
answered on 07 Jul 2010, 03:47 PM
Hey Veskoni, thanks for the quick reply!  I now have conditional row styling working!
0
Jason Nguyen
Top achievements
Rank 1
answered on 07 Jul 2010, 05:42 PM
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
0
Pavel Pavlov
Telerik team
answered on 07 Jul 2010, 06:15 PM
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
0
Jason Nguyen
Top achievements
Rank 1
answered on 07 Jul 2010, 07:10 PM
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
0
Veselin Vasilev
Telerik team
answered on 09 Jul 2010, 02:49 PM
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
0
Veselin Vasilev
Telerik team
answered on 09 Jul 2010, 02:52 PM
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
0
Brian
Top achievements
Rank 1
answered on 24 Sep 2010, 07:27 PM

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>
0
Veselin Vasilev
Telerik team
answered on 28 Sep 2010, 03:23 PM
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
0
Yaroslav
Top achievements
Rank 1
answered on 09 Mar 2011, 02:54 PM
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?
0
Maya
Telerik team
answered on 10 Mar 2011, 11:14 AM
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!
0
Bryce
Top achievements
Rank 1
answered on 13 Dec 2011, 02:27 AM
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
0
Bryce
Top achievements
Rank 1
answered on 13 Dec 2011, 02:27 AM
[edit] double post due to server problem
0
Bryce
Top achievements
Rank 1
answered on 13 Dec 2011, 02:27 AM
[edit] triple post due to server problem
0
Maya
Telerik team
answered on 13 Dec 2011, 09:19 AM
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 >>

0
Bryce
Top achievements
Rank 1
answered on 13 Dec 2011, 08:01 PM
Thanks Maya, that worked.

Bryce
Tags
GridView
Asked by
Jason Nguyen
Top achievements
Rank 1
Answers by
Veselin Vasilev
Telerik team
Jason Nguyen
Top achievements
Rank 1
Pavel Pavlov
Telerik team
Brian
Top achievements
Rank 1
Yaroslav
Top achievements
Rank 1
Maya
Telerik team
Bryce
Top achievements
Rank 1
Share this question
or