[Solved] RadGridView Control Template from SL2 to SL3

[Brent Barkman]

I have recently upgraded an application from SL2 to 3 and am having problems with the styling on the new RadGridView. I'm using the Q3 latest internal builds (i.e. I can open it up in blend no problem) but am unable to achieve the same styling on the control I had in SL2 due to the large changes in the new version of RadGridView. In SL2 I had :

       

 <Color x:Key="PhysicianDarkBlue">#FF002D5A</Color>
 <SolidColorBrush x:Key="PhysicianDarkBlueBrush" Color="{StaticResource PhysicianDarkBlue}"/>
<Color x:Key="GridViewBackgroundItemColor">#FF7F7F7F</Color>
        <SolidColorBrush x:Key="GridViewBackgroundItemBackground" Color="{StaticResource GridViewBackgroundItemColor}"/>
        <telerik:VistaTheme x:Key="Theme"/>
        <ControlTemplate x:Key="RadGridViewTemplate" TargetType="telerikGridView:RadGridView">
            <Border x:Name="PART_MasterGridContainer">
                <vsm:VisualStateManager.VisualStateGroups>
                    <vsm:VisualStateGroup x:Name="GridViewActivity">
                        <vsm:VisualState x:Name="Idle">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GridViewLoadingIndicator" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Busy">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GridViewLoadingIndicator" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>
                <Grid>
                    <Telerik_Windows_Controls_GridView:GridViewItemsControl x:Name="PART_RootItemsControl" ParentRow="{TemplateBinding ParentRow}" ScrollMode="{TemplateBinding ScrollMode}" ShowColumnHeaders="{TemplateBinding ShowColumnHeaders}" ShowGroupPanel="{TemplateBinding ShowGroupPanel}" telerik:StyleManager.Theme="{StaticResource Theme}" Background="#3FFFFFFF"/>
                    <Telerik_Windows_Controls_GridView:GridViewLoadingIndicator x:Name="PART_GridViewLoadingIndicator" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="Collapsed"/>
                </Grid>
            </Border>
        </ControlTemplate>
        <Color x:Key="GridViewElementOuterBorderBrushColor">#FFB3B3B3</Color>
        <SolidColorBrush x:Key="GridViewCellBorderBrush" Color="{StaticResource GridViewElementOuterBorderBrushColor}"/>

        <Style x:Key="RadGridViewStyle1" TargetType="telerikGridView:RadGridView">
            <Setter Property="Template" Value="{StaticResource RadGridViewTemplate}"/>
            <Setter Property="VerticalGridlinesBrush" Value="{StaticResource GridViewCellBorderBrush}"/>
            <Setter Property="CanUserFreezeColumns" Value="False"/>
            <Setter Property="CanUserReorderColumns" Value="False"/>
            <Setter Property="CanUserResizeColumns" Value="False"/>
            <Setter Property="ShowGroupPanel" Value="False"/>
            <Setter Property="IsFilteringAllowed" Value="False"/>
            <Setter Property="Foreground" Value="{StaticResource PhysicianDarkBlueBrush}"/>
            <Setter Property="RowIndicatorVisibility" Value="Collapsed"/>
        </Style>

With the control defined as:

<Grid x:Name="LayoutRoot">

        <telerikGrid:RadGridView x:Name="gridPatients"  AutoGenerateColumns="False" IsReadOnly="True"
            TabNavigation="Once" Style="{StaticResource RadGridViewStyle1}"                                         >

            <telerikGrid:RadGridView.Columns>
                <telerikGrid:GridViewDataColumn Header="Last Name" UniqueName="LastName" Width="200"/>
                <telerikGrid:GridViewDataColumn Header="First Name" UniqueName="FirstName" Width="200"/>
                <telerikGrid:GridViewDataColumn Header="Date of Birth" UniqueName="DateOfBirth" Width="150" DataFormatString="{}{0:d}"/>
            </telerikGrid:RadGridView.Columns>
        </telerikGrid:RadGridView>
    </Grid>

Now I know GridViewItemsControl is marked obsolete in Q3 and I had read that GridViewDataControl is where all of the functionality was moved to, so replacing the following line in the control template:

<Telerik_Windows_Controls_GridView:GridViewItemsControl x:Name="PART_RootItemsControl" ParentRow="{TemplateBinding ParentRow}" ScrollMode="{TemplateBinding ScrollMode}" ShowColumnHeaders="{TemplateBinding ShowColumnHeaders}" ShowGroupPanel="{TemplateBinding ShowGroupPanel}" telerik:StyleManager.Theme="{StaticResource Theme}" Background="#3FFFFFFF"/>

with:

<Telerik_Windows_Controls_GridView:GridViewDataControl ParentRow="{TemplateBinding ParentRow}" ScrollMode="{TemplateBinding ScrollMode}" ShowColumnHeaders="{TemplateBinding ShowColumnHeaders}" ShowGroupPanel="{TemplateBinding ShowGroupPanel}" telerik:StyleManager.Theme="{StaticResource Theme}" Background="#3FFFFFFF"/>

gave me the control in my sample app, with the blue header bar from the vista theme, however it appeared all of the columns were squished together, and no data was visible. (see attached screenshot) If I changed the previous line to include the part_itemscrolviewer, so it looked like:

 <Telerik_Windows_Controls_GridView:GridViewDataControl x:Name="PART_ItemsScrollViewer" ParentRow="{TemplateBinding ParentRow}" ScrollMode="{TemplateBinding ScrollMode}" ShowColumnHeaders="{TemplateBinding ShowColumnHeaders}" ShowGroupPanel="{TemplateBinding ShowGroupPanel}" telerik:StyleManager.Theme="{StaticResource Theme}" Background="#3FFFFFFF"/>

 I would end up with a blank screen and no control.

My full demo app xaml is:

<UserControl x:Class="GridViewTest.MainPage"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
   xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
             xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:Telerik_Windows_Controls_GridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <UserControl.Resources>
        <Color x:Key="PhysicianDarkBlue">#FF002D5A</Color>
        <SolidColorBrush x:Key="PhysicianDarkBlueBrush" Color="{StaticResource PhysicianDarkBlue}"/>
       <Color x:Key="GridViewBackgroundItemColor">#FF7F7F7F</Color>
        <SolidColorBrush x:Key="GridViewBackgroundItemBackground" Color="{StaticResource GridViewBackgroundItemColor}"/>
        <telerik:VistaTheme x:Key="Theme"/>
        <ControlTemplate x:Key="RadGridViewTemplate" TargetType="telerikGrid:RadGridView">
            <Border x:Name="PART_MasterGridContainer">
                <vsm:VisualStateManager.VisualStateGroups>
                    <vsm:VisualStateGroup x:Name="GridViewActivity">
                        <vsm:VisualState x:Name="Idle">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GridViewLoadingIndicator" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Busy">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GridViewLoadingIndicator" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>
                <Grid>
                    <Telerik_Windows_Controls_GridView:GridViewDataControl x:Name="PART_ItemsScrollViewer" ParentRow="{TemplateBinding ParentRow}" ScrollMode="{TemplateBinding ScrollMode}" ShowColumnHeaders="{TemplateBinding ShowColumnHeaders}" ShowGroupPanel="{TemplateBinding ShowGroupPanel}" telerik:StyleManager.Theme="{StaticResource Theme}" Background="#3FFFFFFF"/>
                    <Telerik_Windows_Controls_GridView:GridViewLoadingIndicator x:Name="PART_GridViewLoadingIndicator" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="Collapsed"/>
                </Grid>
            </Border>
        </ControlTemplate>
        <Color x:Key="GridViewElementOuterBorderBrushColor">#FFB3B3B3</Color>
        <SolidColorBrush x:Key="GridViewCellBorderBrush" Color="{StaticResource GridViewElementOuterBorderBrushColor}"/>

        <Style x:Key="RadGridViewStyle1" TargetType="telerikGrid:RadGridView">
            <Setter Property="Template" Value="{StaticResource RadGridViewTemplate}"/>
            <Setter Property="VerticalGridLinesBrush" Value="{StaticResource GridViewCellBorderBrush}"/>
            <Setter Property="CanUserFreezeColumns" Value="False"/>
            <Setter Property="CanUserReorderColumns" Value="False"/>
            <Setter Property="CanUserResizeColumns" Value="False"/>
            <Setter Property="ShowGroupPanel" Value="False"/>
            <Setter Property="IsFilteringAllowed" Value="False"/>
            <Setter Property="Foreground" Value="{StaticResource PhysicianDarkBlueBrush}"/>
            <Setter Property="RowIndicatorVisibility" Value="Collapsed"/>
        </Style>
    </UserControl.Resources>
  <Grid x:Name="LayoutRoot">

        <telerikGrid:RadGridView x:Name="gridPatients"  AutoGenerateColumns="False" IsReadOnly="True"
            TabNavigation="Once" Style="{StaticResource RadGridViewStyle1}"                                         >

            <telerikGrid:RadGridView.Columns>
                <telerikGrid:GridViewDataColumn Header="Last Name" UniqueName="LastName" Width="200"/>
                <telerikGrid:GridViewDataColumn Header="First Name" UniqueName="FirstName" Width="200"/>
                <telerikGrid:GridViewDataColumn Header="Date of Birth" UniqueName="DateOfBirth" Width="150" DataFormatString="{}{0:d}"/>
            </telerikGrid:RadGridView.Columns>
        </telerikGrid:RadGridView>
    </Grid>
</UserControl>

With the codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace GridViewTest
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            ObservableCollection<Patient> patients = new ObservableCollection<Patient>();

            Patient p = new Patient() { FirstName = "patient1", DateOfBirth = DateTime.Now, LastName = "patient1" };
            Patient q = new Patient() { FirstName = "patient2", DateOfBirth = DateTime.Now, LastName = "patient2" };

            patients.Add(p);
            patients.Add(q);

            gridPatients.ItemsSource = patients;
        }
    }

    public class Patient
    {
        public String LastName { get; set; }
        public String FirstName { get; set; }
        public DateTime DateOfBirth { get; set; }
    }
}

Thank you in advance for any assistance provided.

[Kalin Milanov]

Hello Brent Barkman,

There are tons of changes in the templates of the grid since SL2 to our latest release. I believe the best way to see what is happening in the grid at the moment is to use VistaTheme as a custom theme (you can find it in your Themes folder where you installed our controls) and apply your customizations from there.

If you need any assistance with setting up the project or you encounter any difficulties in applying your styles.

All the best,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.