RadGridView Customization

[Dhanasekaran]

Hi,
I am evaluating Rad controls for WPF (RadGridView and few other controls) to use in our project, also had a look at the samples provided along with the evaluation download. I have few queries,
#1. We would be displaying a Summary Row (Frozen row) at bottom of the grid visible area, which is used to display the sum of the values being displayed in that particular column.
#2. Export the grid data(including summary row) in to Microsoft Office Excel file
#3. I would like to customize the gridview's look and feel
 -- remove the RowHeader column, the very first tiny column
 -- remove the curved finish for the last column header

Let me know if these are possible in Rad GridView?

--Dhana

[Nedyalko Nikolov]

Hi Dhanasekaran,

1. Unfortunately the RadGridView for WPF currently does not support Summary Row functionality. This feature is in our To-Do list and we are making our best to deliver it as soon as possible.

2. About the export to Excel, we plan for the end of February to provide an example, similar to this one for the Telerik WinForms suite.

3. Removing the navigation column will be available with the new version of the Rad Controls for WPF which is planned for the end of February.

All you need to customize the Header Row, is a global style for the GridViewItemsControl which can be get from Expression Blend and customize the template around GridViewHeaderRow. For the future, we are planning to provide a Visual Studio Project Template for creating new custom themes, which will make this task easier.

Kind regards,
Nedyalko Nikolov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Dhanasekaran]

Hi Nedyalko Nikolov,
Thanks for including the Summary Row request in your TO DO list, shall I know the likely release date of this?

I have tried to customize the HeaderCell Style but the header text is not being displayed, Navigation column is displaying with default color and Curved Cell in the end also displaying.

This is the xaml code (got from one of the telerik forum threads)

<Style x:Key="HeaderCellStyle" TargetType="telerik:GridViewHeaderCell">
    <Setter Property="FontFamily" Value="Verdana" />
    <Setter Property="FontSize" Value="10" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}">
                <Grid Background="#BCBDC0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <ContentPresenter Margin="5,0,5,0" TextBlock.FontWeight="{TemplateBinding TextBlock.FontWeight}"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path = HeaderText}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Since i do not have the expression blend, is it possible for you to provide a working sample for customizing the Header cells

RadGridView has smooth edges in the corner which need to be changed as just rectangle
color of the GridRow should not change on hovering over the mouse & selected row color need to be customized
color of the scroll bar also need to be customised
are these possible, if so please give the code snippet for this or guide me to correct link.

Thanks in advance,
Dhana

[Dhanasekaran]

I have tried HeaderCellTemplate available here .
It is working fine for the Telerik Assembly version 1, but there are issues when i try to run in the latest Telerik assembly version 2008.

Please guide me how to create a custom template in the latest Telerik version (2008) assemblies.

Thanks,
Dhana

[Jordan]

Hi Dhanasekaran,

1. The Summary Row is in our To-Do list and we are doing our best to deliver it for Q1 2009.
2. The easiest way to change the style of  the GridViewHeaderCell is to define your own, like this:

<Window x:Class="StyleSimpleTheme.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid.Resources>
            <Style TargetType="telerik:GridViewHeaderCell">
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}">
                            <Grid>
                                <Grid.Resources>
                                    <BooleanToVisibilityConverter x:Key="booleanConverter" />
                                    <telerik:VisibilityConverter x:Key="visibilityConverter" />
                                </Grid.Resources>
                                <Grid.Background>
                                    <LinearGradientBrush EndPoint="0.468,0.284" StartPoint="0.468,1.191">
                                        <GradientStop Color="#FF9EB6CE" Offset="0"/>
                                        <GradientStop Color="#FFF4F8FA" Offset="1"/>
                                    </LinearGradientBrush>
                                </Grid.Background>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <ContentPresenter Margin="5,0,5,0"
                              TextBlock.FontWeight="Bold"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center" />
                                <Grid Grid.Column="1" HorizontalAlignment="Right">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <Path x:Name="PART_SortIndicator"
                                          Fill="Black" Grid.Column="0"
                                          VerticalAlignment="Center"
                                          HorizontalAlignment="Right"
                                          Margin="0,0,3,0"  Width="7"
                                          Height="4" Stretch="Fill"
                                          Data="F1 M-3,-3 L4,-3 4,-2 3,-2 3,-1 2,-1 2,4.4703484E-08 1,4.4703484E-08 1,1 2.9802322E-08,1 2.9802322E-08,4.4703484E-08 -1,4.4703484E-08 -1,-1 -2,-1 -2,-2 -3,-2 -3,-3 z"
                                          SnapsToDevicePixels="True"/>
                                    <telerik:DistinctFilterControl Name="PART_DistinctFilterControl" Grid.Column="1" Visibility="{TemplateBinding FilteringUIVisibility}">
                                    </telerik:DistinctFilterControl>
                                </Grid>
                            </Grid>

                            <ControlTemplate.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path = DataColumn.SortingState}" Value="Ascending">
                                    <Setter TargetName="PART_SortIndicator" Property="Path.Visibility" Value="Visible" />
                                    <Setter TargetName="PART_SortIndicator" Property="Path.LayoutTransform" >
                                        <Setter.Value>
                                            <ScaleTransform ScaleX="1" ScaleY="-1"/>
                                        </Setter.Value>
                                    </Setter>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path = DataColumn.SortingState}" Value="Descending">
                                    <Setter TargetName="PART_SortIndicator" Property="Path.Visibility" Value="Visible" />
                                    <Setter TargetName="PART_SortIndicator" Property="Path.LayoutTransform" >
                                        <Setter.Value>
                                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                                        </Setter.Value>
                                    </Setter>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path = DataColumn.SortingState}" Value="None">
                                    <Setter TargetName="PART_SortIndicator" Property="Path.Visibility" Value="Collapsed" />
                                </DataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <telerik:RadGridView x:Name="gridView"/>
    </Grid>
</Window>

I attached the sample project.

Kind regards,
Jordan
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Dhanasekaran]

Hi Jordan,

Thank you for the reply.

I got the code to customize the HeaderCell. Also I have asked few more questions shall I know the answers for that too
-- RadGridView has smooth edges in the corner which need to be changed as just rectangle
-- Color of the GridRow should not change on hovering the mouse & selected row color need to be customized
-- Color of the scroll bar also need to be customized

Thanks,
Dhana

[Pavel Pavlov]

Hello Dhanasekaran,

Please excuse me for the delayed answer.

The XAML below provides three styles for GridViewRow, GridViewScrollViewer and the RadGridView.

These styles target the requested visual changes:
1. Removed rounded corners
2.ScrollBar background ( set to Red just for illustration)
3. Row colors ( removed hover effect and background set to Pink for illustration)

            <Style TargetType="telerikGridView:GridViewRow">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerikGridView:GridViewRow}">
                            <Border Margin="0,0,0,0" Background="{TemplateBinding Background}" HorizontalAlignment="Left">
                                <Border Margin="0,0,0,0" x:Name="SelectedRow" VerticalAlignment="Top" Opacity="1" BorderBrush="#0000BBFF" BorderThickness="0,1,0,1" Background="Transparent">
                                    <Grid x:Name="grid">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <telerikGridView:NavigationPresenter x:Name="PART_NavigationPresenter" Background="#00FFFFFF" Grid.Column="0" />
                                        <telerikGridView:DataCellsPresenter MinHeight="22" x:Name="PART_DataCellsPresenter" Height="Auto" Grid.Column="1" />
                                    </Grid>
                                </Border>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Background" TargetName="SelectedRow" Value="Pink" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerikGridView:GridViewScrollViewer">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate  TargetType="telerikGridView:GridViewScrollViewer">
                            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{TemplateBinding Background}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <ContentPresenter Grid.Column="0" Grid.Row="0" />
                                <ScrollBar x:Name="PART_VerticalScrollBar" Background="Red"  Orientation="Vertical" Margin="{TemplateBinding VerticalScrollBarMargin}" Grid.Column="1" Grid.Row="0" />
                                <ScrollBar x:Name="PART_HorizontalScrollBar" Orientation="Horizontal"  Grid.Column="0" Grid.Row="1" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerik:RadGridView">
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate  TargetType="{x:Type telerik:RadGridView}">
                            <AdornerDecorator>
                                <Border x:Name="PART_MasterGridContainer" Grid.Row="1">
                                    <Border.Background>
                                        <RadialGradientBrush>
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.922" ScaleY="1.45" />
                                                    <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5" />
                                                    <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5" />
                                                    <TranslateTransform X="-0.379" Y="-0.234" />
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Color="#FFF9F9F9" Offset="0" />
                                            <GradientStop Color="#FFCECECE" Offset="1" />
                                        </RadialGradientBrush>
                                    </Border.Background>
                                    <telerikGridView:GridViewItemsControl
                    x:Name="PART_RootItemsControl"
                    IsHierarchyRoot="{TemplateBinding IsHierarchyRoot}"
                    ParentRow="{TemplateBinding ParentRow}"
                    ScrollMode="{TemplateBinding ScrollMode}"
                    ShowColumnHeaders="{TemplateBinding ShowColumnHeaders}"
                    ShowGroupPanel="{TemplateBinding ShowGroupPanel}"
                    />
                                </Border>
                            </AdornerDecorator>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

This xaml relies on the following namespace declarations :

 

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"

 

 

xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"

 

All the best,
Pavel Pavlov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Dhanasekaran]

Thanks Pavel Pavlov for your answers, it is working fine except few things
#1 When rendering the grid initially the scroll bars not appearing properly. (If i do maximize then restore to original size then the scroll bars appears correctly)
#2 I have used the GridViewHeadeCell Template (given by Jordan, above). Is there any way in header cell text alignment can be set programmatically (it should be the same as GridDataColumn text alignment)? or is there any other better way to change the appearance of the GridHeaderRow?
#3 When i resize the grid columns, if the text length exceeds the data cell width in the end it should show three dots(...) and ToolTip (the full text of that cell) for the cell should show when hovering the mouse over that cell.
Note: I am using read only cells only (user will not edit from grid)

If possible kindly answer these questions.

Thanks in advance,
Dhana

[Dhanasekaran]

Adding to the above,
Is it possible to have both Horizontal and Vertical lines in the grid & To change the Grid Line Color?

Thanks,
Dhana

[Nedyalko Nikolov]

Hi Dhanasekaran,

Sorry for the delay of my answer I just want to be sure that all of your suggestions will take place in the new release.

1. Horizontal lines of the RadGridView can appear as part of the GridViewRow, so you can simply change the border color of the SelectedRow border in the examples below.

2. I believe with the new official release (we've done a lot of improvements) there will be no problem with scroll bars.

3. We will do our best to include TextAlignment property of the GridViewHeaderCell, because there are situations where common TextAlignment with the DataCells is not so good idea (etc. numeric columns).

4. With the new official release TextTrimming for the cells will be available by default.

All the best,
Nedyalko Nikolov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.