How to Bind a CellTemplate?

[Ville]

Good afternoon everyone,

I would like to know how I can bind a DataTemplate to a CellTemplate in runtime based on the data.

I have use the following XAML code without success:

 

 

 

 

 

<Grid.Resources>

 

 

 

 

 

 

 

 

 

<DataTemplate x:Key="viewButtonTemplate">

 

 

 

 

 

 

 

 

 

<telerik:RadButton Margin="0 0 0 0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"

 

 

 

 

 

 

 

 

HorizontalAlignment="Right" Content="View" Click="RadButtonView_Click"/>

 

 

 

 

 

 

 

 

 

</DataTemplate>

 

 

 

 

 

 

 

 

 

<DataTemplate x:Key="editButtonTemplate">

 

 

 

 

 

 

 

 

 

<telerik:RadButton Margin="0 0 0 0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"

 

 

 

 

 

 

 

 

HorizontalAlignment="Right" Content="Edit" Click="RadButtonEdit_Click"/>

 

 

 

 

 

 

 

 

 

</DataTemplate>

 

 

 

 

 

 

 

 

 

<DataTemplate x:Key="deleteButtonTemplate">

 

 

 

 

 

 

 

 

 

<telerik:RadButton Margin="0 0 0 0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"

 

 

 

 

 

 

 

 

HorizontalAlignment="Right" Content="Delete" Click="RadButtonDelete_Click"/>

 

 

 

 

 

 

 

 

 

</DataTemplate>

 

 

 

 

 

 

 

 

 

</Grid.Resources>

 

<

 

 

telerikGridView:RadGridView Name="radGridViewAuditHistory" Margin="5,5,5,5" AutoGenerateColumns="False" AlternateRowBackground="Azure" AlternationCount="2"

 

 

 

 

 

 

 

 

IsReadOnly="True" ShowGroupPanel="False" IsBusy="True" CanUserDeleteRows="True" ScrollMode="Deferred">

 

 

 

 

 

 

 

 

 

<telerikNavigation:RadContextMenu.ContextMenu>

 

 

 

 

 

 

 

 

 

<telerikNavigation:RadContextMenu Opened="RadContextMenu_Opened" ItemClick="RadContextMenu_ItemClick">

 

 

 

 

 

 

 

 

 

<telerikNavigation:RadContextMenu.Items>

 

 

 

 

 

 

 

 

 

<telerikNavigation:RadMenuItem Header="Edit" />

 

 

 

 

 

 

 

 

 

</telerikNavigation:RadContextMenu.Items>

 

 

 

 

 

 

 

 

 

</telerikNavigation:RadContextMenu>

 

 

 

 

 

 

 

 

 

</telerikNavigation:RadContextMenu.ContextMenu>

 

 

 

 

 

 

 

 

 

<telerikGridView:RadGridView.Columns>

 

 

 

 

 

 

 

 

 

<telerikGridView:GridViewDataColumn CellTemplate="{Binding ButtonType}"/>

In the code behind I do the following:

 

 

 

 

 

 

 

 

bt = facilityAuditInfo.Resources[

 

"editButtonTemplate"] as DataTemplate;

And then bt later is include in my class with INotifyPropertyChanged

What am I doing wrong?

Thanks in advance

 

[Vlad]

Hello,

 You can use CellTemplate property for desired column to achieve your goal. For example:

grid.Columns[3].CellTemplate = facilityAuditInfo.Resources["editButtonTemplate"] as DataTemplate;

Kind regards,
Vlad
the Telerik team

[Ville]

Right but how do I accomplish this since based on the data per row the button could be one or another?

Thanks

[Pavel Pavlov]

Hi Giuliano,

In this case the CellTemplateSelector of the column would be handy.
You can  see this in action in this online example.  The example demonstrates how to switch templates depending on your data.

Sincerely yours,
Pavel Pavlov
the Telerik team

[Ville]

Thank you, that's exactly what I was looking for.

Do you know an easy way to get the DataTemplate from XAML instead of doing this?

template = (DataTemplate)XamlReader.Load(

 

 

 

@"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">

 

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

HorizontalContentAlignment=""Center"" VerticalContentAlignment=""Center""

Content=""View"" Click=""RadButtonEdit_Click""/>

</DataTemplate>"

 

 

);

 

[Vlad]

Hello,

 You can define both templates are resources and get desired resource in CellTemplateSelector.

Greetings,
Vlad
the Telerik team

[Ville]

Thanks for your response again, so you mean that if I define the resources in the XAML page, then I can refer to those resources like this, right?

if

 

 

(obj.Is_Remote_Entry)

 

{

 

    template = myPage.gridFacilityAuditInfoLayoutRoot.Resources[

 

"editButtonTemplate"] as DataTemplate;

 

}

 

 

 

else

 

 

{

    template = myPage.gridFacilityAuditInfoLayoutRoot.Resources["viewButtonTemplate"] as DataTemplate;

 

}

I want to make sure I am in the right path because if I try the following, I get and error that tells me that I can't declare event handlers:

 

 

 

template = (

 

DataTemplate)XamlReader.Load(

 

 

 

 

@"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">

 

<telerik:RadButton xmlns:telerik=""clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"" Content=""Edit"" Click=""RadButtonEdit_Click""/>

</DataTemplate>"

 

 

 

);

Is there a way around it?

Thank you

 

 

[Vlad]

Hello,

 Parsing XAML with events is not a trivial task - it will be better to declare your templates statically.

Greetings,
Vlad
the Telerik team

[Ville]

So, is it possible or not?

[Marcos Sampaio]

Hello Giuliano,

I think I have what you need.

Firstable create your TemplateSelector class like this:

public class Edit : DataTemplateSelector
    {
        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            var parametro = item as Parametro;
            if ((parametro == null) || (parametro.TipoRegistro == 0))
                return this.EmptyCell;

            if ((parametro.ListaSelecao != null) && (parametro.ListaSelecao.Count > 0))
                return this.ComboBox;

            var IsMasked = parametro.Mascara.Length > 0;

            switch (parametro.Tipo)
            {
                case 'S':
                    return (IsMasked) ? this.MaskedTextBox : this.TextBox;
                case 'I':
                case 'N':
                    return (IsMasked) ? this.MaskedTextBox : this.Integer;
                case 'W':
                case 'O':
                    return this.Password;
                case 'D':
                    return this.DateTime;
                case 'C':
                case 'T':
                    return this.Button;
            }
            return base.SelectTemplate(item, container);
        }

        //Props
        public DataTemplate EmptyCell { get; set; }
        public DataTemplate TextBox { get; set; }
        public DataTemplate MaskedTextBox { get; set; }
        public DataTemplate Integer { get; set; }
        public DataTemplate Password { get; set; }
        public DataTemplate ComboBox { get; set; }
        public DataTemplate Button { get; set; }
        public DataTemplate DateTime { get; set; }
    }

Then import it to your XAML:

xmlns:templateselector="clr-namespace:Test.TemplateSelector"

Now just set those properties you've created before and bind them to a StaticResource

<templateselector:Edit x:Key="EditCells" EmptyCell="{StaticResource Dummy}" TextBox="{StaticResource TextBoxEdit}"
                MaskedTextBox="{StaticResource MaskedTextBoxEdit}" Integer="{StaticResource IntegerEdit}"
                Password="{StaticResource PasswordEdit}" ComboBox="{StaticResource ComboBoxEdit}" Button="{StaticResource ButtonEdit}"
                DateTime="{StaticResource DateTimeEdit}" />

Done! Now you can do whatever you want to

<DataTemplate x:Name="TextBoxEdit">
  <TextBox FontSize="11" Loaded="TextBoxEdit_Loaded" Width="Auto" />
</DataTemplate>

Edit:
I forgot to tell you to add it to the column you want the template:

Column.CellEditTemplateSelector = this.Resources["EditCells"] as DataTemplateSelector

Hope this helps,
BR
Marco.