How to customize Telerik grid display number column header (row indicator) width in WPF?

[Barani]

Is it possible to customize the Telerik grid display number column header (row indicator) width in WPF? If so, please let me know how to change the width.
I have used material theme for the Telerik grid, I need to reduce the width of the header column for number displaying column (first column) that extra space I need to adjust narrow.

Also, I've noticed that other than material theme the number column is displayed as expected.

Please let me know how to modify the width of the header column (first column).

Thanks in advance.

[Masha]

Hello Barani,

In order to achieve the desired approach, you need to modify the control template of GridViewRowStyle. Please check the code snippet below, simply modify the IndentWidth to fit your needs:

<sys:Double x:Key="IndentWidth">65</sys:Double>
            
<ControlTemplate x:Key="GridViewRowTemplate" TargetType="telerik:GridViewRow">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SelectionStates">
                <VisualState x:Name="Unselected"/>
                <VisualState x:Name="SelectedUnfocused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Background_Selected_Unfocused" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Background_Selected" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Selected">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Background_Selected" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <telerik:SelectiveScrollingGrid x:Name="grid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Border x:Name="Background_Main"
                    Grid.Column="2"
                    Grid.ColumnSpan="2"
                    Background="{TemplateBinding Background}"
                    Margin="{TemplateBinding Margin}"
                    Padding="{TemplateBinding Padding}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    BorderThickness="{Binding HorizontalGridLinesWidth, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource GridLineWidthToThicknessConverter}, ConverterParameter=Bottom}"
                    BorderBrush="{TemplateBinding BorderBrush}"/>
            <telerik:DetailsPresenter x:Name="PART_DetailsPresenter" Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="1" DetailsProvider="{TemplateBinding DetailsProvider}"/>
            <ContentPresenter x:Name="PART_HierarchyChildPresenter"
                              Grid.Column="2"
                              Grid.ColumnSpan="2"
                              Grid.Row="2"
                              Margin="0 -1 0 0"
                              telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True"
                              Visibility="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <Border x:Name="Background_Invalid"
                    Grid.Column="1"
                    Grid.ColumnSpan="4"
                    Background="{telerik:MaterialResource ResourceKey=ValidationBrush}"
                    Opacity="0.3"
                    Visibility="Collapsed"/>
            <Border
                Grid.RowSpan="3"
                Width="{StaticResource IndentWidth}"
                Background="{TemplateBinding Background}"
                Visibility="{TemplateBinding RowIndicatorVisibility}"
                telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>
            <Border x:Name="PART_RowBorder"
                    Grid.ColumnSpan="4"
                    Grid.RowSpan="3"
                    BorderBrush="{TemplateBinding HorizontalGridLinesBrush}"
                    BorderThickness="{Binding HorizontalGridLinesWidth, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource GridLineWidthToThicknessConverter}, ConverterParameter=Bottom}"/>
            <Border x:Name="Background_Over" Grid.ColumnSpan="4" Background="{TemplateBinding MouseOverBackground}" Opacity="0" Margin="0 0 0 1"/>
            <Border x:Name="Background_Over_NoAnimation" Grid.ColumnSpan="4" Background="{TemplateBinding mat:MaterialAssist.MouseOverBrush}" Visibility="Collapsed" Margin="0 0 0 1"/>
            <Border x:Name="Background_Selected_Unfocused" Grid.ColumnSpan="4" Background="{TemplateBinding mat:MaterialAssist.CheckedBrush}" Margin="0 0 0 1" Visibility="Collapsed"/>
            <Border x:Name="Background_Selected" Grid.ColumnSpan="4" Background="{TemplateBinding SelectedBackground}" Margin="0 0 0 1" Visibility="Collapsed"/>
            <Border x:Name="PART_IndicatorPresenter"
                    Grid.RowSpan="3"
                    Width="{StaticResource IndentWidth}"
                    VerticalAlignment="Stretch"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="0 0 1 1"
                    Background="Transparent"
                    Visibility="{TemplateBinding RowIndicatorVisibility}"
                    telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                <Grid>
                    <Grid x:Name="GridIndicatorPresenter">
                        <Grid x:Name="NavigatorIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed">
                            <TextBlock x:Name="IconRight"
                            Text="{StaticResource GlyphArrowChevronRight}"
                            telerik:GlyphAdorner.ShowGlyphInDesignTime="True"
                            FontFamily="{x:Static telerik:RadGlyph.TelerikFontFamily}"
                            Foreground="{telerik:MaterialResource ResourceKey=IconBrush}"
                            Opacity="{telerik:MaterialResource ResourceKey=SecondaryOpacity}"
                            FontSize="16"
                            FontWeight="Normal"
                            FontStyle="Normal"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"/>
                        </Grid>
                        <Grid x:Name="EditIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed">
                            <TextBlock
                                    Text="{StaticResource GlyphComment}"
                                    FontFamily="{x:Static telerik:RadGlyph.TelerikFontFamily}"
                                    Foreground="{telerik:MaterialResource ResourceKey=IconBrush}"
                                    Opacity="{telerik:MaterialResource ResourceKey=SecondaryOpacity}"
                                    FontSize="16"
                                    FontWeight="Normal"
                                    FontStyle="Normal"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"/>
                        </Grid>
                        <Grid x:Name="InvalidEditableIndicator" Visibility="Collapsed" Background="Transparent">
                            <TextBlock
                                    Text="{StaticResource GlyphComment}"
                                    FontFamily="{x:Static telerik:RadGlyph.TelerikFontFamily}"
                                    Foreground="{telerik:MaterialResource ResourceKey=ValidationBrush}"
                                    FontSize="16"
                                    FontWeight="Normal"
                                    FontStyle="Normal"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"/>
                            <ToolTipService.ToolTip>
                                <ToolTip Placement="Bottom" Content="{TemplateBinding Errors}" Template="{StaticResource GridViewValidationToolTipTemplate}"/>
                            </ToolTipService.ToolTip>
                        </Grid>
                        <Grid x:Name="ErrorIndicator" HorizontalAlignment="Center" Width="16" Height="16" VerticalAlignment="Center" Visibility="Collapsed">
                            <TextBlock
                                    Text="{StaticResource GlyphWarning}"
                                    FontFamily="{x:Static telerik:RadGlyph.TelerikFontFamily}"
                                    Foreground="{telerik:MaterialResource ResourceKey=ValidationBrush}"
                                    FontSize="16"
                                    FontWeight="Normal"
                                    FontStyle="Normal"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"/>
                            <ToolTipService.ToolTip>
                                <ToolTip Placement="Bottom" Content="{TemplateBinding Errors}" Template="{StaticResource GridViewValidationToolTipTemplate}"/>
                            </ToolTipService.ToolTip>
                        </Grid>
                        <Thumb x:Name="PART_RowResizer" Style="{StaticResource RowGripperStyle}"/>
                    </Grid>
                    <telerik:GridViewPinButton x:Name="PinnedRowPresenter"
                             IsPinned="{Binding IsPinned, RelativeSource={RelativeSource TemplatedParent}}"
                             Visibility="Collapsed"
                             DataContext="{x:Null}"
                             CommandParameter="{Binding .Item, ValidatesOnNotifyDataErrors=False, RelativeSource={RelativeSource TemplatedParent}}"/>
                </Grid>
            </Border>
            <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Grid.Column="3"/>
            <Grid
                    Grid.Column="2"
                    Width="{StaticResource IndentWidth}"
                    Opacity="{Binding IsExpandable, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToOpacityConverter}}"
                    Visibility="{Binding HasHierarchy, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
                    telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                <telerik:GridViewToggleButton x:Name="PART_HierarchyExpandButton"
                IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                IsHitTestVisible="{TemplateBinding IsExpandable}"
                IsTabStop="{TemplateBinding IsTabStop}"/>
            </Grid>
            <telerik:IndentPresenter x:Name="PART_IndentPresenter"
            Grid.Column="1"
            Grid.RowSpan="4"
            IndentLevel="{TemplateBinding IndentLevel}"
            telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>
        </telerik:SelectiveScrollingGrid>
    </Border>
    <ControlTemplate.Triggers>
        <!-- MouseOver and animation disabled -->
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True"/>
                <Condition Property="DisplayVisualCues" Value="True"/>
                <Condition Property="IsValid" Value="True"/>
                <Condition Property="IsSelected" Value="False"/>
                <Condition Property="telerik:AnimationManager.IsAnimationEnabled" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="Background_Over_NoAnimation" Property="Visibility" Value="Visible"/>
        </MultiTrigger>

        <!-- MouseOver and animation enabled -->
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True"/>
                <Condition Property="DisplayVisualCues" Value="True"/>
                <Condition Property="IsValid" Value="True"/>
                <Condition Property="IsSelected" Value="False"/>
                <Condition Property="telerik:AnimationManager.IsAnimationEnabled" Value="True"/>
            </MultiTrigger.Conditions>
            <MultiTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="00:00:00.20" From="0" To="1" Storyboard.TargetName="Background_Over" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>
                </BeginStoryboard>
            </MultiTrigger.EnterActions>
            <MultiTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="00:00:00.20" From="1" To="0" Storyboard.TargetName="Background_Over" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>
                </BeginStoryboard>
            </MultiTrigger.ExitActions>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsValid" Value="False"/>
                <Condition Property="IsInEditMode" Value="False"/>
                <Condition Property="DisplayVisualCues" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="Background_Invalid" Property="Visibility" Value="Visible"/>
            <Setter TargetName="ErrorIndicator" Property="Visibility" Value="Visible"/>
            <Setter TargetName="Background_Selected_Unfocused" Property="Background" Value="{x:Null}"/>
            <Setter TargetName="Background_Selected" Property="Background" Value="{x:Null}"/>
            <Setter TargetName="Background_Main" Property="Visibility" Value="Collapsed"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsValid" Value="False"/>
                <Condition Property="IsInEditMode" Value="True"/>
                <Condition Property="DisplayVisualCues" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="Background_Invalid" Property="Visibility" Value="Visible"/>
            <Setter TargetName="InvalidEditableIndicator" Property="Visibility" Value="Visible"/>
            <Setter TargetName="Background_Selected_Unfocused" Property="Background" Value="{x:Null}"/>
            <Setter TargetName="Background_Selected" Property="Background" Value="{x:Null}"/>
            <Setter TargetName="Background_Main" Property="Visibility" Value="Collapsed"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsValid" Value="True"/>
                <Condition Property="IsInEditMode" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="EditIndicator" Property="Visibility" Value="Visible"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsValid" Value="True"/>
                <Condition Property="IsCurrent" Value="True"/>
                <Condition Property="IsInEditMode" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="NavigatorIndicator" Property="Visibility" Value="Visible"/>
        </MultiTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsEnabled, ElementName=PinnedRowPresenter}" Value="True"/>
                <Condition Binding="{Binding IsMouseOver, ElementName=PART_IndicatorPresenter}" Value="True"/>
            </MultiDataTrigger.Conditions>
            <Setter TargetName="GridIndicatorPresenter" Property="Visibility" Value="Collapsed"/>
            <Setter TargetName="PinnedRowPresenter" Property="Visibility" Value="Visible"/>
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsPinned, RelativeSource={RelativeSource Self}}" Value="True"/>
                <Condition Binding="{Binding IsEnabled, ElementName=PinnedRowPresenter}" Value="True"/>
            </MultiDataTrigger.Conditions>
            <Setter TargetName="GridIndicatorPresenter" Property="Visibility" Value="Collapsed"/>
            <Setter TargetName="PinnedRowPresenter" Property="Visibility" Value="Visible"/>
        </MultiDataTrigger>
        <Trigger Property="FlowDirection" Value="RightToLeft">
            <Setter TargetName="IconRight" Property="Text" Value="{StaticResource GlyphArrowChevronLeft}"/>
        </Trigger>
        <Trigger Property="HorizontalGridLinesWidth" Value="0">
            <Setter TargetName="Background_Over" Property="Margin" Value="0"/>
            <Setter TargetName="Background_Over_NoAnimation" Property="Margin" Value="0"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<Style  TargetType="telerik:GridViewRow" BasedOn="{StaticResource GridViewRowStyle}">
    <Setter Property="Template" Value="{StaticResource GridViewRowTemplate}"/>
</Style>

Hope this helps.

Regards,
Masha
Progress Telerik

[Barani]

Hello Masha,

Thanks for your response. I've tried the above code on mine and got some errors like Glyph icons since I'm using dot net 4.8 version I guess the given code is in the latest version. Can I get the control template code for the above mention version? It will be helpful for me to get sync with my code.
Please find the Telerik version I'm using,


As for now I've commented out the error and run, I noticed other than the header column (first cell) all the rows in the first column are narrow down. How to do for that header column (first cell) as well. 
Please find the image for your  reference, you can see the misaligned columns and the above mentioned issue.


Also, I've some questions

1. I have used this Telerik grid in many places, do I need to put this template in all the places or is there any other way to do in common, so that it will affect all the places?
2. Then, as of my concern I only need to narrow the display number column header (row indicator) width alone. If there any possibility to change that particular part in control template or do I need to use the whole thing? Because of this one change function I'm missing out already working default functions. Please let me know if there is a way to do.

[Masha]

Hello Barani,

I guess you got errors if you are using the Xaml approach and have no dictionaries merged. I create a sample demo where the desired approach is demonstrated. You need to add No.Xaml binaries and the Material theme.

Regarding your questions:

1. I have used this Telerik grid in many places, do I need to put this template in all the places or is there any other way to do in common, so that it will affect all the places? - you don't need to put the templates in all the places. Defining implicit styles in App.xaml will be enough and all the changes will be reflected in the whole project.

2. Then, as of my concern I only need to narrow the display number column header (row indicator) width alone.- Grid row has several row types where the width should be changed. GridViewRowTemplate, GridViewNewRowTemplate, GridViewHeaderRowTemplate and GridViewFooterRowTemplate. In every template, IndentWidth should be updated in order for the row indicator width to be changed.

I hope this helps.

Regards,
Masha
Progress Telerik

[Barani]

Hello Masha,

Thanks for your demo project and sorry for the late reply. I have got the expected result when I put the control template code in App.xaml page. Can you please guide me how to use the above template in code behind process?

[Barani]

Hello Masha,

Is there any lead for the above message? 

I've tried implementing the code behind the process, by creating a new dictionary xaml and put the control template code which is provided by you and the ResourceDictionary code in App.xaml but while doing this am getting some behavioral change in other functionalities UI like drop down menu selection. 

This change is because of the theme (Material Theme) we used. So, what I'm asking for you is there any way to do it in common style for the material theme or how can I overcome this issue? 

Since the code is not too specific, used keyword is same it is trying to get the new one (our control template implementation). So, I need the functionality i.e. Row indicator header column width alone, not to overwrite the previously used material theme. 

Can you please help me to overcome this issue or if any, idea or lead much appreciated. Please let me know if you need more information.

Thanks in advance.

[Barani]

Hello Masha,

Also, Is it possible to create a custom theme? If yes can you provide a sample so that we can create our own for our requirement and do customization.

[Masha]

Hi Barani,

I'm sorry for the late reply.

Straight to your questions:

1.  Is it possible to create a custom theme? - The easiest way to create a custom theme is to merge our themes files referenced from the Telerik.Windows.Themes.Material.dll and mere your custom styles after that. For your convenience, I included needed resource dictionaries for the GridView based on the Material theme in the attached project. You can find them in the MyCustomTheme folder, but they are not used anywhere in the project.
2. You wrote you have some behavior changed after applying the provided styles from my side. I'm not sure why this happened, maybe you are using more themes in your project. I can suggest you move all my previous styles to a separate Resource dictionary, and merge it when you are using the Material theme. Another suggestionis to add x:Key to every RowStyle and applied them on GridViewStyle like so:

<Style x:Key="GridWithSmallIndicatorStyle" TargetType="telerik:RadGridView" BasedOn="{StaticResource RadGridViewStyle}">
        <Setter Property="FooterRowStyle" Value="{StaticResource CustomGridViewFooterRowStyle}" />
        <Setter Property="HeaderRowStyle" Value="{StaticResource CustomGridViewHeaderRowStyle}" />
        <Setter Property="NewRowStyle" Value="{StaticResource CustomNewRowStyle}" />
        <Setter Property="RowStyle" Value="{StaticResource CustomGridViewRowStyle}" />
    </Style>

I demonstrated the last approach in the attached project.

I hope this helps.

Regards,
Masha
Progress Telerik

[Barani]

Hello Masha,

Thanks for your response. We tried your above solution, but does not work in our expected way. I think you have misunderstood our problem or we didn't convey properly.

When we included the theme in App.xaml under Resource Dictionary, it is affecting the other UI component's style in the project as well.

<ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Material;component/Themes/System.Windows.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Material;component/Themes/Telerik.Windows.Controls.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Material;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Material;component/Themes/Telerik.Windows.Controls.GridView.xaml"/>
                <ResourceDictionary Source="CustomStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

In the below image we added a button and its default style affected by the Telerik material theme which is included in the resource dictionary (refer above code)

Please find the below image for your reference (default button theme in left ->  change over to new style in right)

Please let us know how to change the RadGridView style without affecting the other UI component default style.

[Masha]

Hello Barani,

Sorry for the misunderstanding. 

You want to have the material theme applied only for the GridView and have your modifications there, right? To achieve this simply move merged dictionaries from App.xaml in the CustomStyle resource dictionary and merge it in the scope of RadGridView.

<telerik:RadGridView x:Name="telerikView" DataContext="{StaticResource MyViewModel}" 
                     ItemsSource="{Binding Clubs}" NewRowPosition="Top" FrozenColumnCount="1"
                     Style="{DynamicResource GridWithSmallIndicatorStyle}">
    <telerik:RadGridView.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CustomStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </telerik:RadGridView.Resources>
</telerik:RadGridView>

I hope this helps.

Regards,
Masha
Progress Telerik