GridView RowStyle

6 posts, 1 answers
  1. Sourabh
    Sourabh avatar
    8 posts
    Member since:
    Dec 2011

    Posted 14 Dec 2011 Link to this post

    hi there,

    I am applying a RowStyle, and AlternateRowStyle to radgrid view, here is the style
     <Style  TargetType="telerik:GridViewHeaderCell" x:Key="MyHeaderCellStyle">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="BorderThickness" Value="1,0,0,1"/>
      </Style>

    <LinearGradientBrush x:Key="GridViewRowSelectedBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="LightBlue"  Offset="1"/>
                <GradientStop Color="LightBlue" Offset="0"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="GridViewInvalidBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFCDCDC"/>
                <GradientStop Color="#FFFCC1C1" Offset="1"/>
            </LinearGradientBrush>
            <telerik:BooleanToOpacityConverter x:Key="BooleanToOpacityConverter"/>
            <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
            <Telerik_Windows_Controls_GridView:GridLineWidthToThicknessConverter x:Key="GridLineWidthToThicknessConverter"/>
            <telerik:Office_BlackTheme x:Key="Theme"/>
            <SolidColorBrush x:Key="GridViewRowIndicatorBackground" Color="#FFDBDEE1"/>
            <LinearGradientBrush x:Key="GridViewIndicatorsPartsFill" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF000000" Offset="0"/>
                <GradientStop Color="#FF000000" Offset="1"/>
            </LinearGradientBrush>
            <ControlTemplate x:Key="GridViewRowTemplate" TargetType="Telerik_Windows_Controls_GridView:GridViewRow">
                <ContentControl x:Name="ROOT">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigatorIndicator" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value=".5"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ROOT" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Blue"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ValueStates">
                            <VisualState x:Name="Valid"/>
                            <VisualState x:Name="Invalid">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InvalidBorder" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="EditStates">
                            <VisualState x:Name="EditMode">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigatorIndicator" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EditIndicator" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="ReadOnlyMode"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Telerik_Windows_Controls_GridView:SelectiveScrollingGrid x:Name="grid">
                        <Telerik_Windows_Controls_GridView:SelectiveScrollingGrid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Telerik_Windows_Controls_GridView:SelectiveScrollingGrid.ColumnDefinitions>
                        <Telerik_Windows_Controls_GridView:SelectiveScrollingGrid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Telerik_Windows_Controls_GridView:SelectiveScrollingGrid.RowDefinitions>
                        <Border x:Name="SelectionBackground" Margin="{TemplateBinding Margin}" MinHeight="{TemplateBinding MinHeight}" Grid.Column="2" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{x:Null}" BorderThickness="0" Padding="{TemplateBinding Padding}"/>
                        <Rectangle x:Name="BackgroundRectangle" Fill="{StaticResource GridViewRowSelectedBackground}" Opacity="0" Grid.Column="2" Grid.ColumnSpan="2"/>
                        <Rectangle x:Name="InvalidBorder" Fill="{StaticResource GridViewInvalidBackground}" Opacity="0" Grid.Column="2" Grid.ColumnSpan="2"/>
                        <telerikGridView:GridViewToggleButton MinHeight="24" Width="24" IsHitTestVisible="{Binding IsExpandable, RelativeSource={RelativeSource TemplatedParent}}" Opacity="{Binding IsExpandable, Converter={StaticResource BooleanToOpacityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Visibility="{Binding HasHierarchy, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Telerik_Windows_Controls_GridView:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>
                        <Border Visibility="{Binding HasHierarchy, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" BorderBrush="{TemplateBinding VerticalGridLinesBrush}" BorderThickness="{Binding VerticalGridLinesWidth, Converter={StaticResource GridLineWidthToThicknessConverter}, ConverterParameter=Right, RelativeSource={RelativeSource TemplatedParent}}" Telerik_Windows_Controls_GridView:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>
                        <Telerik_Windows_Controls_GridView:DataCellsPresenter x:Name="PART_DataCellsPresenter" Grid.Column="3" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                        <Telerik_Windows_Controls_GridView:DetailsPresenter x:Name="PART_DetailsPresenter" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="1" DetailsProvider="{TemplateBinding DetailsProvider}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                        <ContentPresenter x:Name="PART_HierarchyChildPresenter" Visibility="{Binding IsExpanded, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="2"/>
                        <Border x:Name="PART_RowBorder" VerticalAlignment="Bottom" Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="4" BorderBrush="{TemplateBinding HorizontalGridLinesBrush}" BorderThickness="{Binding HorizontalGridLinesWidth, Converter={StaticResource GridLineWidthToThicknessConverter}, ConverterParameter=Bottom, RelativeSource={RelativeSource TemplatedParent}}"/>
                        <Telerik_Windows_Controls_GridView:IndentPresenter x:Name="PART_IndentPresenter" Background="{TemplateBinding Background}" Grid.Column="1" Grid.RowSpan="4" IndentLevel="{TemplateBinding IndentLevel}" Telerik_Windows_Controls_GridView:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                        <Border x:Name="PART_IndicatorPresenter" VerticalAlignment="Stretch" Width="24" Visibility="{TemplateBinding RowIndicatorVisibility}" Grid.Column="0" Grid.RowSpan="3" Background="{StaticResource GridViewRowIndicatorBackground}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" Telerik_Windows_Controls_GridView:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                            <Grid>
                                <Path x:Name="NavigatorIndicator" Fill="{StaticResource GridViewIndicatorsPartsFill}" Stretch="Fill" Height="8" HorizontalAlignment="Center" VerticalAlignment="Center" Width="5" Visibility="Collapsed" Data="M254.5,183.75 L254.5,193.33333 260.75,188.16682 z"/>
                                <Path x:Name="EditIndicator" Fill="Black" Stretch="Fill" Stroke="{x:Null}" Height="5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="9" Visibility="Collapsed" Data="M0,4 L8,4 8,5 0,5 z M0,2 L8,2 8,3 0,3 z M0,0 L8,0 8,1 0,1 z"/>
                            </Grid>
                        </Border>
                    </Telerik_Windows_Controls_GridView:SelectiveScrollingGrid>
                </ContentControl>
            </ControlTemplate>
            <SolidColorBrush x:Key="GridViewRowNormalBackground" Color="#FFFFFFFF"/>
            <SolidColorBrush x:Key="AlternamteGridViewRowNormalBackground" Color="LightGray"/>
            <SolidColorBrush x:Key="GridLinesFill" Color="#FFB3B3B3"/>
            <SolidColorBrush x:Key="GridViewForeground" Color="#FF000000"/>
            <Style x:Key="GridViewRowStyle" TargetType="Telerik_Windows_Controls_GridView:GridViewRow">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Template" Value="{StaticResource GridViewRowTemplate}"/>
                <Setter Property="Background" Value="{StaticResource GridViewRowNormalBackground}"/>
                <Setter Property="BorderBrush" Value="{StaticResource GridLinesFill}"/>
                <Setter Property="MinHeight" Value="24"/>
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="Foreground" Value="{StaticResource GridViewForeground}"/>
            </Style>


            <Style x:Key="AlternateGridViewRowStyle" TargetType="Telerik_Windows_Controls_GridView:GridViewRow">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Template" Value="{StaticResource GridViewRowTemplate}"/>
                <Setter Property="Background" Value="{StaticResource AlternamteGridViewRowNormalBackground}"/>
                <Setter Property="BorderBrush" Value="{StaticResource GridLinesFill}"/>
                <Setter Property="MinHeight" Value="24"/>
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="Foreground" Value="{StaticResource GridViewForeground}"/>
            </Style>

    and my grid is configured below:
    <telerik:RadGridView  x:Name="_dataGrid1" BorderThickness="1" RowIndicatorVisibility="Collapsed"  AlternationCount="2"
      Grid.Row="2" DataLoadMode="Asynchronous" ScrollViewer.HorizontalScrollBarVisibility="Auto"  RowStyle="{StaticResource GridViewRowStyle}" AlternateRowStyle="{StaticResource AlternateGridViewRowStyle}"
                                         ScrollViewer.VerticalScrollBarVisibility="Auto"  ShowGroupPanel="False"
                                         ActionOnLostFocus="None" EditTriggers="None" AreRowDetailsFrozen="False"
      AutoGenerateColumns="False" GridLinesVisibility="Vertical"   
      CanUserSortColumns="True" CanUserInsertRows="False" CanUserDeleteRows="False"
      CanUserResizeColumns="False" CurrentCellChanged="_dataGrid_CurrentCellChanged" MouseLeftButtonUp="_dataGrid1_MouseLeftButtonUp" SelectionChanged="_dataGrid1_SelectionChanged">
                <telerik:RadGridView.HeaderRowStyle>
                    <Style TargetType="telerik:GridViewHeaderRow">
                        <Setter Property="BorderBrush" Value="Gray"/>
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="White" Offset="0.3"/>
                                    <GradientStop Color="LightSlateGray" Offset="1"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </telerik:RadGridView.HeaderRowStyle>
            </telerik:RadGridView>

    I am facing two problems:
    1- Row colors are not extending all the way to the right.
    2- I want to minimize the border thickness, how to do that?

    Before applying the rowstyle and alternate rowstyle, row colors are extending all the way to the right. I am attaching the image of the gridview for your reference.

    Regards,
    Sourabh Bose
  2. Answer
    Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 14 Dec 2011 Link to this post

    Hello Sourabh,


    Thank you for sharing these styles with us! Indeed the problem resides within your style - you replaced the root element of the template with a ContentControl, which causes this behavior. You may stretch it through setting HorizontalContentAlignment, VerticalContentAlignment properties to Stretch:

    <ContentControl x:Name="ROOT" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

    However I would recommend you to leave the default behavior where the root element is a Border:

    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">


    Then you may change the Thickness of the row using a simple style and set it to an appropriate value. 

    All the best,
    Vanya Pavlova
    the Telerik team

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

  3. Sourabh
    Sourabh avatar
    8 posts
    Member since:
    Dec 2011

    Posted 14 Dec 2011 Link to this post

    Hi Vanya,

    Thanks for your quick reply, my problem is resolved after applying your solution.

    I have one more issue:

    I am setting the border thickness of GridViewHeaderCell to 0
    <Style  TargetType="telerik:GridViewHeaderCell" x:Key="MyHeaderCellStyle">
                <Setter Property="BorderThickness" Value="0"/>
    </Style>

    however I can still see the thick border around the column header, I am attaching an image for your reference.

    Regards,
    Sourabh Bose
  4. Sourabh
    Sourabh avatar
    8 posts
    Member since:
    Dec 2011

    Posted 14 Dec 2011 Link to this post

    Hi Vanya,

    Thanks for your quick reply, my problem is resolved after applying your solution.

    I have one more issue:

    I am setting the border thickness of GridViewHeaderCell to 0
    <Style  TargetType="telerik:GridViewHeaderCell" x:Key="MyHeaderCellStyle">
                <Setter Property="BorderThickness" Value="0"/>
    </Style>

    however I can still see the thick border around the column header, I am attaching an image for your reference.

    Regards,
    Sourabh Bose
  5. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 14 Dec 2011 Link to this post

    Hi Sourabh,


    Thank you for getting back to us!
    The mentioned Border element is the inner border of GridViewHeaderCell and you cannot change it with a simple style. You should predefine its template using Expression Blend and modify it from there. 


    Regards,
    Vanya Pavlova
    the Telerik team

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

  6. Sourabh
    Sourabh avatar
    8 posts
    Member since:
    Dec 2011

    Posted 14 Dec 2011 Link to this post

    Hi Vanya,

    can you please share me the GridViewHeaderCell template, so that I can handle the inner border. 

    Regards,
    Sourabh Bose
Back to Top