Hi all,
First my view was working with a simple DataGrid. then cutomer asked to have merge cell (MergedCellsDirection=vertical) for some column.
I changed to a RadGridView.
I readed that I can re-use standard template to style the RadGridView, principaly the GridViewRow but i did not found what I needed.
Here the list of points that i want to achieve. (Code Below)
HEADER :
(1) I have disabled the square on the left-top corner, I still have one white pixel left to the first column header.
(2) I have disabled the roll over effect on the header, and I have a rectangle arround the header column label. (Want the header column not clickable)
(3) I want to remove the filtering Icon
ROW :
(4) Same as header, white pixel on left
(5) Dont want row to be selectable
(6) I use MergedCellsDirection="Vertical" (see Cal ID column), and I want a dotted separation between the line.
My code worked with a DataGrid first, then i try to migrate to GridViewRow style .. without success. The cell value doesnt not appear. (the content)
Before (with a RadGrid), the content was displayed with => see style RadGridViewRow_Standard
<DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>In advance, Many thanks for your help !
XAML:
<telerik:RadGridView x:Name="GridCalibrators"
BorderBrush="{x:Null}"
BorderThickness="0"
AutoGenerateColumns="False"
IsReadOnly="True"
CanUserSelect="False"
GridLinesVisibility="None"
CanUserReorderColumns="False"
CanUserSortColumns="False"
Background="White"
CanUserSelectColumns="False"
ShowGroupPanel="False"
CanUserDeleteRows="False"
CanUserResizeColumns="False"
CanUserResizeRows="False"
RowIndicatorVisibility="Collapsed"
CanUserFreezeColumns="False"
ShowSearchPanel="False"
ShowColumnSortIndexes="False"
MergedCellsDirection="Vertical"
GroupRenderMode="Flat"
CanUserSearch="False"
CanUserSortGroups="False"
HeaderRowStyle="{StaticResource RadGridViewColumnHeaderStyle}"
RowStyle="{StaticResource RadGridViewRow_Standard}"
Grid.Row="0"
>
<!--RowStyle="{StaticResource RadGridViewRow_Standard}"-->
<telerik:RadGridView.OpacityMask>
<VisualBrush Visual="{Binding ElementName=BDRoundedCalibrators}"/>
</telerik:RadGridView.OpacityMask>
<telerik:RadGridView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFFFFF"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="#5D6467"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#FFFFFF"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="#5D6467"/>
</telerik:RadGridView.Resources>
<telerik:RadGridView.Columns>
<!-- Status -->
<telerik:GridViewDataColumn Header="Status" Width="175"
HeaderCellStyle="{StaticResource RadGridViewHeaderCellStyle}"
DataMemberBinding="{Binding WellStatus}"
IsCellMergingEnabled="False">
<telerik:GridViewDataColumn.CellTemplate>
<DataTemplate>
<StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center" >
<Image x:Name="IconStatus" Height="37" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10,0,0,0">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Value="Completed" Binding="{Binding WellStatus}">
<Setter Property="Source" Value="{StaticResource AssayApproval_IconCompleted}"/>
</DataTrigger>
<DataTrigger Value="Processing" Binding="{Binding WellStatus}">
<Setter Property="Source" Value="{StaticResource AssayApproval_IconProcessing}"/>
</DataTrigger>
<DataTrigger Value="Aborted" Binding="{Binding WellStatus}">
<Setter Property="Source" Value="{StaticResource AssayApproval_IconAborted}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Text="{Binding WellStatus}"/>
</StackPanel>
</DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>
<telerik:GridViewPinRowColumn MinWidth="0" Width="1" HeaderCellStyle="{StaticResource RadGridViewColumnSeparatorStyle}" />
<!--PlateSerialNumber-->
<telerik:GridViewDataColumn Header="Plate serial number" Width="108"
HeaderCellStyle="{StaticResource RadGridViewHeaderCellStyle}"
DataMemberBinding="{Binding PlateBarcode}"
IsCellMergingEnabled="False"/>
<telerik:GridViewPinRowColumn MinWidth="0" Width="1" HeaderCellStyle="{StaticResource RadGridViewColumnSeparatorStyle}" />
<telerik:GridViewDataColumn Header="Position" Width="150"
HeaderCellStyle="{StaticResource RadGridViewHeaderCellStyle}"
DataMemberBinding="{Binding Position}"
IsCellMergingEnabled="False"/>
..... (only the first columns)Style file :
<Style x:Key="RadGridViewColumnSeparatorStyle" TargetType="{x:Type telerik:GridViewHeaderCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Rectangle VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="White" Height="45"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderThickness" Value="0 0 0 0"/>
</Style>
<Style x:Key="RadGridViewHeaderCellStyle" TargetType="{x:Type telerik:GridViewHeaderCell}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="VerticalContentAlignment" Value="Center"></Setter>
<Setter Property="BorderThickness" Value="0 0 0 0"/>
<Setter Property="IsHitTestVisible" Value="False"/>
</Style>
<Style x:Key="RadGridViewColumnHeaderStyle" TargetType="{x:Type telerik:GridViewHeaderRow}">
<Setter Property="Background" Value="{StaticResource Zentech_DarkGray}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="TextElement.FontFamily" Value="{StaticResource PrimaryFont}"/>
<Setter Property="TextElement.FontSize" Value="16pt"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Height" Value="55"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderThickness" Value="0 0 0 0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0"/>
</Style>
<Style x:Key="RadGridViewRow_Standard" TargetType="{x:Type telerik:GridViewRow}" >
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="{StaticResource Zentech_DarkGray}"/>
<Setter Property="TextElement.FontFamily" Value="{StaticResource PrimaryFont}"/>
<Setter Property="TextElement.FontSize" Value="16pt"/>
<Setter Property="Height" Value="65"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<!--<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:GridViewRow}">
<Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<SelectiveScrollingGrid>
<SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</SelectiveScrollingGrid.ColumnDefinitions>
<SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</SelectiveScrollingGrid.RowDefinitions>
<DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}"/>
<Path Grid.Row="2" Grid.ColumnSpan="2"
Data="M0,0.5 L1,0.5"
Stretch="Fill" Stroke="{StaticResource Zentech_DarkGray}" StrokeThickness="1"
StrokeDashArray="1.0 4.0"/>
</SelectiveScrollingGrid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>-->
</Style>
1 Answer, 1 is accepted
Hi ARNAUD DANJOU,
Thank you for the provided details. I will start directly with your questions.
(1) I have disabled the square on the left-top corner, I still have one white pixel left to the first column header.
I am not exactly sure where this 1 px is coming from. I have tested your code snippet but did not get this 1 px on my end. Can you try setting the FrozenColumnsSplitterVisibility property to Collapsed and let me know if this works.
(2) I have disabled the roll over effect on the header, and I have a rectangle arround the header column label. (Want the header column not clickable)
The Border comes from the VerticalAlignment property in the custom RadGridViewHeaderCellStyle style. You can remove it. To reposition the content of the cell you can use the VerticalContentAlignment and HorizontalContentAlignment properties of the GridViewHeaderCell element. To make it not clickable you can set the IsHitTestVisible to false as you have already done.
(3) I want to remove the filtering Icon
To remove the filter icon you can set the IsFilterable property of the GridViewDataColumn to False.
(4) Same as header, white pixel on left
Try the approach in point 1.
(5) Dont want row to be selectable
You have already disabled the selection by setting the CanUserSelect property of the RadGridView to false. Can you elaborate more on what else you want to remove?
(6) I use MergedCellsDirection="Vertical" (see Cal ID column), and I want a dotted separation between the line.
My code worked with a DataGrid first, then i try to migrate to GridViewRow style .. without success. The cell value doesnt not appear. (the content)
When you want to modify the template of our elements it is recommended to extract the template first and then modify it. In the default template of our controls, there are elements that are required. Their x:Name starts with Part_(Name). If they don't exist the control won't work as expected. I would suggest checking the Editing Control Templates help article which demonstrates how you can get the default template of our controls. In the extracted template you could add an element to show a dotted border.
As a side note, I notice that the Height property of the GridViewRow in the custom style is set. This will lead to performance degradation. To change the row height you can use the RowHeight property of the RadGridView.
I hope I was able to cover all your questions.
Regards,
Dinko
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.