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

9 posts, 0 answers
  1. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 01 Sep 2011 Link to this post

    Hi

    I am using a custom row template to style the layout of my gridview. Is there a way to set the alternating background colors?

    I tried setting the  AlternateRowBackground, but when I set the AlternationCount=2 makes every second row not use the template.

    Regards
    Murray
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 01 Sep 2011 Link to this post

    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 >>

  3. DevCraft banner
  4. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 01 Sep 2011 Link to this post

    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}">








  5. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 02 Sep 2011 Link to this post

    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 >>

  6. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 02 Sep 2011 Link to this post

    Yes that is what I get. My question is would there be a way to set alternating colors when using custom row layouts?
  7. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 02 Sep 2011 Link to this post

    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 >>

  8. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 02 Sep 2011 Link to this post

    Ok I found a way using AlternateRowStyle

    Sample Project

    Is there a better way than having to replicate the whole template? My project template is huge and having two versions will become unmanagable.
  9. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 02 Sep 2011 Link to this post

    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 >>

  10. Murray
    Murray avatar
    121 posts
    Member since:
    Aug 2010

    Posted 02 Sep 2011 Link to this post

    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>
                     
                    <!--Alternate-->
     
                    <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





Back to Top
DevCraft banner