Button on gridview column header

[Philipp]

Hello Telerik Team,

I want to add a button on a gridview column header. For that I wrote a custom control that inherits from GridViewDataColumn. The custom control sets the GridViewHeaderCellStyle and implements a command.

Here the style:

<ResourceDictionary 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"
                    xmlns:controls="clr-namespace:MyControls">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.GridView.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <Style TargetType="telerik:GridViewHeaderCell" BasedOn="{StaticResource GridViewHeaderCellStyle}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <StackPanel>
                        <TextBlock Text="myText"/>
                        <telerik:RadButton Content="myButton" Command="{Binding TestCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=controls:hGridViewDataColumn}}"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

And the custom control:

namespace MyControls
{   
    public class hGridViewDataColumn : GridViewDataColumn
    {
        static hGridViewDataColumn()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(hGridViewDataColumn), new FrameworkPropertyMetadata(typeof(hGridViewDataColumn)));
        }

        public hGridViewDataColumn()
        {
            HeaderCellStyle = FindResource("hGridViewHeaderCellStyle") as Style;
        }

        private ICommand _testCommand;
        public ICommand TestCommand
        {
            get
            {
                return ...;
            }
        }
    }
}

Unfortunately the binding doesn't work. What's wrong?

 

[Stefan]

Hi Phillipp,

Thank you for providing the code that demonstrates the setup you are using.

The reported behavior would be the expected one, as the columns of RadGridView are not actually visual elements. A possible solution for this requirement would be to define the DataContext of RadGridView(your view model, for example) as a static resource and set it explicitly to be the Source of the command binding. Would such an approach be working for you? You can also take a look at the Column Header Binding forum thread, as this topic is discussed in greater detail in it.

Have a great week, Phillipp.

Regards,
Stefan X1
Progress Telerik

[Philipp]

Hello Stefan,

thanks for your answer. The problem is that the columns are greated dynamically in code because their types and the count depend on a user input. So the command respectively the column text need to be set on runtime either by a binding or by a direct assignment. The binding didn't work, I tried to set it over the visual tree (as above) and over the DataContext of the column like:

GridViewDataColumn c = new GridViewDataColumn();

c.DataContext = new MyColumnViewModel(text)

and in the style

<Style TargetType="telerik:GridViewHeaderCell" BasedOn="{StaticResource GridViewHeaderCellStyle}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding MyText}"/>
                        <telerik:RadButton Content="myButton" Command="{Binding MyCommand}"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Then I thought to set the text and the command directly by assignment but I'm not sure how to get the textbox or the button element which was defined in a style!

Any suggestions?

Regards,

Philipp

[Stefan]

Hi Phillipp,

The DataContext of the columns of RadGridView will be the DataContext of the grid itself. However, the headers of the columns do not automatically inherit this DataContext. Thus, the Source property of the Command binding of the button needs to be explicitly set. Please, refer to the code snippet below.

<Style TargetType="telerik:GridViewHeaderCell" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding MyText}"/>
                            <telerik:RadButton Content="myButton" Command="{Binding MyCommand, Source={StaticResource MyViewModel}}"/>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Can you please give the suggestion a try?

Regards,
Stefan X1
Progress Telerik