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

Styling of Grid Header Row

1 Answer 10 Views
GridView
This is a migrated thread and some comments may be shown as answers.
mike okon
Top achievements
Rank 1
mike okon asked on 03 Aug 2016, 11:59 AM

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

Mike

 

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Dilyan Traykov
Telerik team
answered on 03 Aug 2016, 01:40 PM
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" />
</Style>

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

Regards,
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.
Tags
GridView
Asked by
mike okon
Top achievements
Rank 1
Answers by
Dilyan Traykov
Telerik team
Share this question
or