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

How to set alternating row color when using a row template?

8 Answers 230 Views

GridView

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

8 Answers, 1 is accepted

0

answered on 01 Sep 2011, 03:58 PM

Hi Murray,

You should set these properties on a grid level, not on a row level:

<UserControl.Resources>

<Style TargetType="telerik:RadGridView">

<Setter Property="AlternateRowBackground" Value="Red"/>

<Setter Property="AlternationCount" Value="3"/>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">

<telerik:RadGridView Margin="72,32,64,144" ItemsSource="{Binding Collection}"/>

If you need any further assistance do not hesitate to contact us!

Best wishes,
Vanya Pavlova
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0

answered on 01 Sep 2011, 04:51 PM

thanks for the reply but that had no effect.

Here is a sample of my code:

<LinearGradientBrush x:Key="Windows7RowBackground" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#001D1D1D"/>

<GradientStop Color="#00333333" Offset="1"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="ItemBackground_Selected" EndPoint="0.499,0" StartPoint="0.501,1">

<GradientStop Color="#FF3f3f3f" Offset="0"/>

<GradientStop Color="#FF515151" Offset="1"/>

</LinearGradientBrush>

<ControlTemplate x:Key="CustomRowTemplate" TargetType="telerik:GridViewRow">

<Border x:Name="rowsContainer" BorderBrush="#FFC6C6C6" BorderThickness="0,0,0,1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="{StaticResource Windows7RowBackground}" >

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="rowsContainer">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ItemBackground_Selected}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid Margin="10,0,10,4">

<Grid.RowDefinitions>

<RowDefinition Height="0" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="20" />

<ColumnDefinition Width="100" />

<ColumnDefinition Width="130" />

<ColumnDefinition Width="130" />

<ColumnDefinition Width="0" />

<ColumnDefinition Width="130" />

<ColumnDefinition Width="130" />

<ColumnDefinition Width="0" />

<ColumnDefinition Width="130" />

<ColumnDefinition Width="130" />

<ColumnDefinition Width="0" />

<ColumnDefinition Width="130" />

<ColumnDefinition Width="130" />

<ColumnDefinition Width="0" />

<ColumnDefinition Width="130" />

<ColumnDefinition Width="130" />

<ColumnDefinition Width="0" />

<ColumnDefinition Width="78" />

<ColumnDefinition Width="130" />

</Grid.ColumnDefinitions>

<CheckBox Grid.RowSpan="5"

VerticalAlignment="Center"

HorizontalAlignment="Left"

IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />

<Grid Margin="5"

VerticalAlignment="Center">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<RadioButton Grid.Row="0"

Grid.Column="0"

GroupName="{Binding Id}"

Margin="0,0,0,5"

>

</RadioButton>

<TextBlock Grid.Row="0"

Grid.Column="1">

</TextBlock>

<RadioButton Grid.Row="1"

Grid.Column="0"

GroupName="{Binding Id}"

Margin="0,0,0,5"

>

</RadioButton>

<TextBlock Grid.Row="1"

Grid.Column="1">

</TextBlock>

<RadioButton Grid.Row="2"

Grid.Column="0"

GroupName="{Binding Id}"

>

</RadioButton>

<TextBlock Grid.Row="2"

Grid.Column="1">

</TextBlock>

<TextBlock

Grid.Row="3"

Grid.ColumnSpan="2"

Margin="0,5,0,0"

TextWrapping="Wrap" Width="80"

Text="" />

</Grid>

</Border>

<Border Grid.Column="2" Grid.Row="1" >

<TextBlock

VerticalAlignment="Center"

HorizontalAlignment="Left">

</TextBlock>

</Border>

<Border Grid.Column="3" Grid.Row="1" >

<TextBlock

Text=""

VerticalAlignment="Center"

HorizontalAlignment="Left"

TextWrapping="Wrap"

/>

</Border>

<Border Grid.Row="2" Grid.Column="2" >

<TextBlock

HorizontalAlignment="Left"

VerticalAlignment="Center">

</TextBlock>

</Border>

<Border Grid.Row="2" Grid.Column="3">

<TextBlock

Text=""

VerticalAlignment="Center"

HorizontalAlignment="Left"

TextWrapping="Wrap"/>

</Border>

<Border Grid.Row="3" Grid.Column="2">

<TextBlock

HorizontalAlignment="Left"

VerticalAlignment="Center">

</TextBlock>

</Border>

</Grid>

</Border>

</ControlTemplate>

<Style x:Key="rowStyle" TargetType="telerik:GridViewRow">

<Setter Property="Template" Value="{StaticResource CustomRowTemplate}" />

</Style>

<telerik:RadGridView

ItemsSource="{Binding xxxx}"

SelectedItem="{Binding xxxx, Mode=TwoWay}"

Behaviors:RadGridViewBehavior.GridManager="{Binding GridManager}"

RowIndicatorVisibility="Collapsed"

RowStyle="{StaticResource rowStyle}"

Style="{StaticResource Control_ResultsGrid}"

AutoGenerateColumns="False"

BorderBrush="{StaticResource ControlOuterBorder_Normal}">

0

answered on 02 Sep 2011, 08:25 AM

AlternateRowBackground.png

Hello Murray,

Thank you for sharing this snippet with us! You have created a custom row layout for a RadGridView control and as fas I can see from the snippets you have missed to set the AlternateRowBackground/AlternationCount properties of RadGridView to an appropriate values. By default alternated rows are desgined to work with a plain GridViewRow, not with a custom one. Even if you set these properties in a custom row layout scenario you may see the result at the attached picture.

Kind regards,
Vanya Pavlova
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0

0

answered on 02 Sep 2011, 12:50 PM

Hi Murray,

In a custom row layout scenario everything is custom and build by your side. RadGridView internally "does not know" anything about this custom layout and how to set this AlternateRowBackground, because it is designed to work with plain GridViewRow. Unfortunately you cannot use alternated rows in a custom row layout scenario.

Kind regards,
Vanya Pavlova
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0

0

answered on 02 Sep 2011, 01:23 PM

Hi Murray,

Thank you for getting back to us! Indeed the mentioned solution is a great one and I believe that this is the best approach in such case. GridViewRow is an element, which is not much different than any other control with a predefined template. AlternateRowBackground/AlternationCount are properties of RadGridView and by that reason you get an ordinary row. Indeed the approach using AlternateRowStyle similar to the default one is the easiest possible solution.

If you need any further assistance do not hesitate to contact us!

Best wishes,
Vanya Pavlova
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0

answered on 02 Sep 2011, 02:16 PM

I found a better way.

In the template I bound the background to the templatedParent

Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"

Then moved the background color to the style

<LinearGradientBrush x:Key="Windows7RowBackground" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF1D1D1D"/>

<GradientStop Color="#FF333333" Offset="1"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="Windows7RowBackground2" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF414141"/>

<GradientStop Color="#FF3B3B3B" Offset="1"/>

</LinearGradientBrush>

<Style x:Key="rowStyle" TargetType="telerik:GridViewRow">

<Setter Property="Template" Value="{StaticResource CustomRowTemplate}" />

<Setter Property="Background" Value="{StaticResource Windows7RowBackground}"/>

</Style>

<Style x:Key="rowStyle2" TargetType="telerik:GridViewRow">

<Setter Property="Template" Value="{StaticResource CustomRowTemplate}" />

<Setter Property="Background" Value="{StaticResource Windows7RowBackground2}"/>

</Style>

<telerik:RadGridView x:Name="playersGrid"

RowStyle="{StaticResource rowStyle}"

AlternateRowStyle="{StaticResource rowStyle2}"

AlternationCount="2"

RowIndicatorVisibility="Collapsed"

AutoGenerateColumns="False"

AutoExpandGroups="True"

ShowColumnHeaders="False" Margin="8,31,8,0" Height="441" VerticalAlignment="Top">

Cheers

Tags

GridView

Asked by

Answers by