[Solved] Custom button command/method

[Aaron]

Hi,
I need to add a button column that runs my own method. I've seen examples for doing grid related commands (RadGridViewCommands.Delete) but I couldn't find any example to run your own code. I believe I have a handle on how to add a button column but I'm not sure how to wire the click event to my own method.
Thanks for any help!

[Maya]

Hello Aaron,

I am sending you a sample project illustrating how you may define your own custom command and set it for a particular button. Furthermore, you may just subscribe to its Click event and handle it as required.
 

Regards,
Maya
the Telerik team

[Aaron]

Hi Maya,
Thank you for the example. I'm not familiar with C# or MVVM but I think I can follow the logic. I have one more question - How do I get the object that is associated with the row where the button was clicked. On the button click, I will be showing a popup that is populated by the object's contents.
Thank you,
Aaron

[Maya]

Hi Aaron,

The DataContext of the button would be the item in the corresponding row:

private void RadButton_Click(object sender, RoutedEventArgs e)
        {
            var button = sender as RadButton;
            var item = button.DataContext;
        }

 

Best wishes,
Maya
the Telerik team

[Aaron]

Thanks Maya! That's working well. One more question/issue;

I can't get the cellpadding style to take affect. Is it because I have a button in that column?

<UserControl x:Class="TestGrid.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:TelerikGridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    mc:Ignorable="d"
    Height="Auto" Width="360">
    <UserControl.Resources>
        <Style x:Key="NoPaddingCell" TargetType="TelerikGridView:GridViewCell">
            <Setter Property="Padding" Value="0"/>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadGridView Name="FileList" CanUserReorderColumns="False" IsFilteringAllowed="False" IsReadOnly="True" CanUserFreezeColumns="False" CanUserResizeColumns="False" RowIndicatorVisibility="Collapsed" ShowGroupPanel="False" CanUserInsertRows="False" CanUserDeleteRows="False" BorderThickness="0" AutoGenerateColumns="False" RowHeight="20" ScrollViewer.VerticalScrollBarVisibility="Auto" AlternateRowBackground="#FFF0F0F0" AlternationCount="2" >
            <telerik:RadGridView.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="#FFCFD3D8" Offset="1"/>
                    <GradientStop Color="#FFE9E9EA" Offset="0.659"/>
                    <GradientStop Color="#FFF4F4F5" Offset="0.375"/>
                </LinearGradientBrush>
            </telerik:RadGridView.Background>
            <telerik:RadGridView.Columns>
                <telerik:GridViewImageColumn UniqueName="ThumbnailColumn" DataMemberBinding="{Binding ThumbnailURL}" Header="" Width="40" Background="Transparent"/>
                <telerik:GridViewDataColumn UniqueName="FileDescriptionColumn" DataMemberBinding="{Binding Description}" Header="File" Width="*" IsVisible="True"/>
                <telerik:GridViewDataColumn UniqueName="FolderDescriptionColumn" DataMemberBinding="{Binding FolderDisplay}" Header="Folder" Width="80" IsVisible="True"/>
                <telerik:GridViewDataColumn UniqueName="CabinetColumn" DataMemberBinding="{Binding CabinetName}" Header="Cabinet" Width="80" IsVisible="True" />
                <telerik:GridViewColumn UniqueName="PropertiesColumn" IsVisible="True" CellStyle="{StaticResource NoPaddingCell}" Width="Auto">
                    <telerik:GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadButton Padding="0,0,0,0" Width="10" Height="Auto" Background="Black" >
                                <StackPanel Orientation="Vertical">
                                    <TextBlock Text="." Foreground="White" Margin="0,-6,0,-2" Padding="0"/>
                                    <TextBlock Text="." Foreground="White" Margin="0,-6,0,-2" Padding="0"/>
                                    <TextBlock Text="." Foreground="White" Margin="0,-6,0,0" Padding="0"/>
                                </StackPanel>
                            </telerik:RadButton>
                        </DataTemplate>
                    </telerik:GridViewColumn.CellTemplate>
                </telerik:GridViewColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</UserControl>

[Maya]

Hi Aaron,

Basically, the columns cannot get smaller than 20 pixels. As a result the padding seems not to be applied. What you may do is to set explicitly the MinWidth property of the column to the desired value.
I am sending you a sample project using the code snippet you provided and demonstrating the proposed solution. Let me know if it corresponds to your requirements.
 

Greetings,
Maya
the Telerik team

[Aaron]

Hi Maya,
That worked fantastically. Perfect solution. Thank you very much.
Aaron

[Aaron]

Last question Maya - is there a way to refer to the button from code? In other words, do I have access to the button's properties in the code behind. For example: in xaml; <button content="oldcontent"/>, in codebehind; buttoningrid1.content = "newcontent".

[Maya]

Hello Aaron,

As the button is defined in a DataTemplate, you cannot get it by using its Name. What you may do though is to use the ChildrenOfType<T> extension method (you need to add using Telerik.Windows.Controls;) and find the button corresponding to a particular row.
So, let's say you want to change the content of the button on the selected row once another button (outside the grid for example) is clicked. You may handle the Click event of the second button as follows:

private void Button1_Click(object sender, RoutedEventArgs e)
        {
            if(this.playersGrid.SelectedItem != null)
            {
                var selectedRow = this.playersGrid.ItemContainerGenerator.ContainerFromItem(this.playersGrid.SelectedItem) as GridViewRow;
                var button = selectedRow.ChildrenOfType<RadButton>().FirstOrDefault();
                button.Content = "NewContent";
            }
        }

All the best,
Maya
the Telerik team