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

GridView RowStyle

5 Answers 108 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Sourabh
Top achievements
Rank 1
Sourabh asked on 14 Dec 2011, 07:39 AM
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

5 Answers, 1 is accepted

Sort by
0
Accepted
Vanya Pavlova
Telerik team
answered on 14 Dec 2011, 09:24 AM
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 >>

0
Sourabh
Top achievements
Rank 1
answered on 14 Dec 2011, 10:02 AM
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
0
Sourabh
Top achievements
Rank 1
answered on 14 Dec 2011, 10:02 AM
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
0
Vanya Pavlova
Telerik team
answered on 14 Dec 2011, 10:18 AM
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 >>

0
Sourabh
Top achievements
Rank 1
answered on 14 Dec 2011, 10:23 AM
Hi Vanya,

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

Regards,
Sourabh Bose
Tags
GridView
Asked by
Sourabh
Top achievements
Rank 1
Answers by
Vanya Pavlova
Telerik team
Sourabh
Top achievements
Rank 1
Share this question
or