[Solved] Inherit from GridView

[Ghiutzu]

Can one inherit from telerik GridView ? In our project all UI controls we use are custom controls derived from a certain interface, therefore we have to build a custom gridview control that will inherit this interface.
Can this be done, and if so, are there any samples available ?

[Rossen Hristov]

Hi Ghiutzu,

There should be no problems in inheriting the grid. I have prepared and attached a small sample project with a control (MyGrid) that inherits from RadGridView.

Please, examine the sample project and let me know if you have any other questions or troubles with the inheritance.

Sincerely yours,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Ghiutzu]

Hi,

Thanks for your reply.
Indeed, I tried your sample and it works, it's easy to inherit the grid inside cs file.

Regards

[Lakshmi]

I want to add a button to expose the export to excel functionality of the GridView . It would be ideal if I can inherit from the GridView and add this button to the grid (probably in the row indicator column header)  . Can you please let me know if it is possible ?



Best,
Lakshmi

[Rossen Hristov]

Hello Lakshmi,

You will need to define a HeaderRowStyle for the grid and then modify the GridViewHeaderRowTemplate. Then place your button inside the IndicatorPresenter and handler its click event to do anything you want. Here is how to do this:

<UserControl x:Class="TicketID_226748_ExcelExportButton.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" xmlns:GridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView" xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <Controls:Office_BlackTheme x:Key="Theme" />
            <SolidColorBrush x:Key="GridViewHeaderInnerBorder" Color="#FFEEEEEE" />
            <SolidColorBrush x:Key="GridViewHeaderCellBorderBrush" Color="#FFB3B3B3"/>
            <SolidColorBrush x:Key="GridViewHeaderRowDataCellsPresenterBackground" Color="Transparent" />
            <LinearGradientBrush x:Key="GridViewHeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFF8F8F9" Offset="0"/>
                <GradientStop Color="#FFDBDEE1" Offset="1"/>
                <GradientStop Color="#FFDFE2E5" Offset="0.4"/>
                <GradientStop Color="#FFC7CBD1" Offset="0.4"/>
            </LinearGradientBrush>

            <DataTemplate x:Key="GridViewHeaderIndentCellDataTemplate">
                <GridView:GridViewHeaderIndentCell Controls:StyleManager.Theme="{StaticResource Theme}"/>
            </DataTemplate>

            <ControlTemplate x:Key="GridViewHeaderRowTemplate" TargetType="GridView:GridViewHeaderRow">
                <Border x:Name="PART_GridViewHeaderRowBorder"
                BorderBrush="{TemplateBinding BorderBrush}"
                Background="{TemplateBinding Background}"
                BorderThickness="{TemplateBinding BorderThickness}"
                MinHeight="{TemplateBinding MinHeight}"
                Margin="{TemplateBinding Margin}"
                Padding="{TemplateBinding Padding}"
                UseLayoutRounding="True">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <Border BorderBrush="{StaticResource GridViewHeaderInnerBorder}" Grid.ColumnSpan="3"
                        BorderThickness="0,0,0,1"
                        UseLayoutRounding="True"/>

                        <GridView:IndicatorPresenter
                            x:Name="PART_IndicatorPresenter"
                            MinHeight="{TemplateBinding MinHeight}"
                            VerticalAlignment="Stretch"
                            Controls:StyleManager.Theme="{StaticResource Theme}"
                            Visibility="{TemplateBinding RowIndicatorVisibility}"
                            Grid.Column="0" >

                            <Border BorderBrush="{StaticResource GridViewHeaderCellBorderBrush}" BorderThickness="0,0,1,0">
                                <Button Content="x" Click="OnExportButtonClick"></Button>
                            </Border>

                        </GridView:IndicatorPresenter>

                        <GridView:IndentPresenter x:Name="PART_IndentPresenter" MinHeight="{TemplateBinding MinHeight}"
                                  Controls:StyleManager.Theme="{StaticResource Theme}"
                                  IndentLevel="{TemplateBinding IndentLevel}"
                                  ItemTemplate="{StaticResource GridViewHeaderIndentCellDataTemplate}"
                                  Grid.Column="1" />

                        <GridView:DataCellsPresenter x:Name="PART_DataCellsPresenter" MinHeight="{TemplateBinding MinHeight}"
                                         Controls:StyleManager.Theme="{StaticResource Theme}"
                                         Background="{StaticResource GridViewHeaderRowDataCellsPresenterBackground}"
                                         Grid.Column="2" />
                    </Grid>
                </Border>
            </ControlTemplate>

            <Style x:Key="GridViewHeaderRowStyle" TargetType="GridView:GridViewHeaderRow">
                <Setter Property="Template" Value="{StaticResource GridViewHeaderRowTemplate}"/>
            </Style>
        </Grid.Resources>

      <telerik:RadGridView
            Name="clubsGrid"
            Grid.Row="0"
            AutoGenerateColumns="False"
            ColumnsWidthMode="Auto"
            HeaderRowStyle="{StaticResource GridViewHeaderRowStyle}">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="Est." DataMemberBinding="{Binding Established}"
                        DataFormatString="{}{0:yyyy}">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="Stadium"
                        DataMemberBinding="{Binding StadiumCapacity}" DataFormatString="{}{0:N0}">
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>

        </telerik:RadGridView>
    </Grid>
</UserControl>

And the code-behind:

using System.Windows;
using System.Windows.Controls;

namespace TicketID_226748_ExcelExportButton
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            this.InitializeComponent();

            this.clubsGrid.ItemsSource = Club.GetClubs();
        }

        private void OnExportButtonClick(object sender, RoutedEventArgs e)
        {
            //Do your job here...
        }
    }
}

I have attached the sample project that the above code snippets are from. You can use it as a starting point and extend it in way to meet your requirements. I hope it helps.

Regards,
Ross
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.

[Lakshmi]

Hi Ross,

 

Thanks a lot for the explanation and the sample.

Is it possible to set all the necessary templates and styles at runtime in codebehind instead of XAML ?

Any help in this matter is greatly appreciated.

Best,
Lakshmi

[Rossen Hristov]

Hi Lakshmi,

In theory, you can do everything in the code-behind instead of XAML, but I guess that defining such a huge template in the code-behind will be unnecessary pain. You can have the template (or several templates) defined in XAML and the use code-behind to decide which one to set. Something like this:

            Style style = new Style();
            style.TargetType = typeof(GridViewHeaderRow);
            ControlTemplate ct = //extract your template from some resource here...
            style.Setters.Add(new Setter(Control.TemplateProperty, ct));
            this.playersGrid.HeaderRowStyle = style;

I hope this helps.

Kind regards,
Ross
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.

[Roberto]

Hi,

I'm trying to create a custom control library using telerik controls as base clases, and creating a default styleguide based on the default telerik styles for each control.

Basically, what I have (as if I was extending from standard WPF controls) is a ResourceDictionary (Generic.xaml) with a Targeted Style for each Custom Control, using the 'BasedOn' property. Something like this:

<Style BasedOn="{StaticResource {x:Type ComboBox}}"
       TargetType="{x:Type local:MyComboBox}">
        <Setter Property="Background" Value="Red" />
        <Setter Property="Foreground" Value="DarkGray" />
</Style>

Regrettably, it seems this doesn't work out of the box with telerik, I mean, using RadComboBox as StaticResource. I've tried using the ThemeResourceKey with no luck:

<Style TargetType="{x:Type local:MyComboBox}"
               BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme, ElementType=Controls:RadComboBox}}">
    <Setter Property="Background" Value="Red" />
    <Setter Property="Foreground" Value="DarkGray" />
</Style>

The MyComboBox file looks like this:

public class MyComboBox : RadComboBox
{
        static MyComboBox ()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(MyComboBox), new FrameworkPropertyMetadata(typeof(MyComboBox)));
        }
}

 (FYI: I also tried overriding the TargetType of the inherited control)

[LocalizabilityAttribute(LocalizationCategory.NeverLocalize)]
[Ambient]
public Type TargetType
{
    get { return typeof (RadComboBox);}
}

With no luck...

Any suggestions?

--

R.

PD: If I must start another thread for this issue please let me know. Thanks!

[Kalin Milanov]

Hello Roberto,

This indeed is somewhat strange behavior and we will be investigating it further. What comes to mind is for you to try and use

telerik:StyleManager.BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme, ElementType=Controls:RadComboBox}}"

Let me know what the outcome is.

Greetings,
Kalin Milanov
the Telerik team

[Roberto]

Hello Kalim,

I couldn't find the BasedOn property inside the StyleManager, as you suggested (see attached image)

I'm using the latest release of WPF controls (WPF Q1 2010 SP2, released on June/2010)

--

R.

[Kalin Milanov]

Hello Roberto,

It am sorry I have sent you on a wild goose chase with the BasedOn property as I did not realize at the time we were talking about WPF. In fact there is no need to apply a based on to the control as in the CS file you inherit the RadComboBox and its styling. Attached I am sending you a sample application which does just what you did except for the BasedOn part. 

Now what seems to be an error is that applying the background and the foreground will affect only the items in the popup as the look of the combo remains unchanged.  

Is this what you are aiming for?

Greetings,
Kalin Milanov
the Telerik team

[Roberto]

Hi Kalim,

Thanks for your comments on this.

About the Background/Foreground of the combobox, it is just proof of concept. I explain it here:
A) http://www.telerik.com/community/forums/wpf/general-discussions/custom.aspx

Regarding on how to create inherited telerik controls with a default (customized) style, I've got an answer from your colleagues:
B) http://www.telerik.com/community/forums/wpf/general-discussions/custom-inherited-library.aspx

By looking at those two posts you will probably get the idea, anyway, we are still hesitating regarding to A) 

Thanks again,


--
R.

[Cliff]

Hi,

Have you got an example of inheriting from the RadGridView for Silverlight 4 and version 2010.3.1206.1040 as I can't get this to find the telerik:RadGridView.Columns?

Regards,

Cliff Harrison.

[Cliff]

Hi,

Have you got an example of inheriting from the RadGridView for Silverlight 4 and version 2010.3.1206.1040 as I can't get this to find the telerik:RadGridView.Columns?

Regards,

Cliff Harrison.

[Vlad]

Hello,

 Please refer to this thread. 

Greetings,
Vlad
the Telerik team

[rahul]

Hi,

I am having a problem with RadGridView.
When I am clicking on the rowItems again and again,and then click on some other row.
Then the one row is deleted from gridView.

Plzz  help me ASAP.

Thanks ,
Rahul

[Sultan]

Hi,

I have Custom User Grid Control inherited from System.Windows.UI.DataGrid, how can i inherit interface of RadDataGridview, in order to get Theme. Is there any example.

Thanks 
Sultan