Styling of Grid Header Row

2 posts, 1 answers
  1. mike okon
    mike okon avatar
    40 posts
    Member since:
    Dec 2009

    Posted 03 Aug 2016 Link to this post

    I have a grid row header and row styling issue.


    I need the Toggle button and area in which it resides to be made bigger so that opening of the details is made easier. (This will be for a touch screen application)

    I believe it is the PART_HierarchyIndentPresenter  which needs to be made WIDER. But am NOT Sure. I have attached a screenshot showing the issue. The arrow is to close to the row edge and the area is too small for a finger input. Both arrow and area need to be made larger and wider


    Please can you point out in the Style where this needs to be changed. I have tried width="87" but this has NO EFFECT


    Kind Regards



    <ControlTemplate x:Key="GridViewFooterRowTemplate"
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    <Border x:Name="PART_FooterRowBorder"
    BorderBrush="{TemplateBinding BorderBrush}"
    BorderThickness="{TemplateBinding BorderThickness}"
    Background="{TemplateBinding Background}"
    Padding="{TemplateBinding Padding}"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
    <Border x:Name="PART_HierarchyIndent"
    Visibility="{Binding HasHierarchy, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
    grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
    <Border x:Name="PART_IndicatorPresenter"
    Visibility="{TemplateBinding RowIndicatorVisibility}"
    Background="{StaticResource Custom_Background_MainBrush}"
    BorderThickness="0,0,0,0" />
    <grid:IndentPresenter x:Name="PART_IndentPresenter"
    IndentLevel="{TemplateBinding IndentLevel}"
    ItemTemplate="{StaticResource GridViewFooterIndentCellDataTemplate}"
    grid:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
    <grid:DataCellsPresenter x:Name="PART_DataCellsPresenter"
    Grid.Column="3" />

  2. Answer
    Dilyan Traykov
    Dilyan Traykov avatar
    617 posts

    Posted 03 Aug 2016 Link to this post

    Hello Mike,

    The elements you need to modify depend on whether you're using RowDetails or hierarchy.

    - If you're using RowDetails, the element you should target in order to achieve the desired look is the GridViewToggleButton:

    <Style TargetType="telerik:GridViewToggleButton" BasedOn="{StaticResource GridViewToggleButtonStyle}">
        <Setter Property="Width" Value="87" />

    - In case you've built your hierarchy using RadGridView's ChildTableDefinitions, you need to modify the control templates of the GridViewRow and GridViewHeaderRow and change the widths of the PART_HierarchyExpandButton and PART_HierarchyIndentPresenter elements respectively.

    Please give this a try and let me know how this goes.

    Dilyan Traykov
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top