This is a migrated thread and some comments may be shown as answers.

Respond to a button click for a column with button?

2 Answers 87 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Rob Ainscough
Top achievements
Rank 1
Rob Ainscough asked on 05 Sep 2012, 06:43 PM
I'm trying to figure out what event I should be using for a column that who's cell template is set to a button (this is in an sdk:Page).

<telerik:RadGridView x:Name="ToDoListGridView" Margin="0" AreRowDetailsFrozen="True" AutoGenerateColumns="False" CanUserFreezeColumns="False" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserSortColumns="False" MinHeight="75" MaxHeight="155" RowIndicatorVisibility="Collapsed" ItemsSource="{Binding Path=ToDoLists, Mode=TwoWay}" ShowGroupPanel="False" IsReadOnly="True">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn Header="ToDoID" IsVisible="False" DataMemberBinding="{Binding ToDoMAPID}" />
        <telerik:GridViewDataColumn Header="Date" MaxWidth="80" MinWidth="80" Width="80" DataMemberBinding="{Binding ToDoSystemDate}" TextAlignment="Right" DataFormatString="{}{0:d}" />
        <telerik:GridViewDataColumn Header="Category" MaxWidth="110" MinWidth="110" Width="110" DataMemberBinding="{Binding ToDoClassDescription}" />
        <telerik:GridViewDataColumn Header="Task/Note" MaxWidth="390" MinWidth="390" Width="390" DataMemberBinding="{Binding ToDoTask}" />
        <telerik:GridViewDataColumn Header="Status" MaxWidth="80" MinWidth="80" Width="80" DataMemberBinding="{Binding ToDoStatusDescription}" />
        <telerik:GridViewDataColumn Header="Priority" MaxWidth="75" MinWidth="75" Width="75" DataMemberBinding="{Binding ToDoPriorityDescription}" />
        <telerik:GridViewColumn CellTemplate="{StaticResource DeleteMiniButton}" FooterTextAlignment="Center" IsResizable="False" IsGroupable="False" IsFilterable="False" MaxWidth="30" MinWidth="30" TextAlignment="Center" Width="30" Background="Transparent" HeaderTextAlignment="Center" IsSortable="False" IsReorderable="False" ShowDistinctFilters="False" />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

The DeleteMiniButton DataTemplate is (this is in my App.xaml):

<DataTemplate x:Key="DeleteMiniButton">
    <Button Content="X"
        Padding="2"
        FontWeight="Bold"
        FontSize="12"
        Template="{StaticResource RedDeleteButton}"
        ToolTipService.ToolTip="Delete Entry"
        Cursor="Hand" />
</DataTemplate>

The button gets displayed in every row of my grid - this is good.  Now how do I trap a user clicking the button from a specific row/column (or cell)?  I can't find an appropriate event.

2 Answers, 1 is accepted

Sort by
0
Rob Ainscough
Top achievements
Rank 1
answered on 06 Sep 2012, 05:35 AM
SOLVED:
I created a new DataTemplate based on a RadButton and used the Command="telerik:RadGridViewCommands.Delete" and CommandParameter="{Binding}" built in support for ICommand.
<DataTemplate x:Key="RadDeleteMiniButton">
    <telerik:RadButton Content="X"
        Padding="2"
        FontWeight="Bold"
        FontSize="12"
        Command="telerik:RadGridViewCommands.Delete" CommandParameter="{Binding}"   
        Template="{StaticResource RedDeleteButton}"
        ToolTipService.ToolTip="Delete Entry"
        Cursor="Hand" />
</DataTemplate>

Add some code behind (no idea how to make this work with true MVVM -- but I suspect I would have to use Prism or MVVM Light or some other templates which don't help ROI and makes the project that more difficult to manage for other developers (not to mention code bloat).  I use a "Rob optimized" approach to MVVM ... I use it in situations where it fits easily with minimal extra code.  I really don't understand why MVVM seems to be something a lot of developers want?  Or maybe most developers don't? 

My end users do NOT like change, especially "view" changes ... in fact, I don't know any end users that like frequent UI changes ... MVVM seems to be a pattern without a cause IMHO ... but anyway, this is the code behind that solves my problem (I can rely on Items(0) because I don't allow multi row deletes).
Private Sub ToDoListGridView_Deleted(sender As Object, e As Telerik.Windows.Controls.GridViewDeletedEventArgs) Handles ToDoListGridView.Deleted
 
    Try
 
        If Not IsNothing(e) Then
 
            If Not IsNothing(e.Items(0)) Then
 
                Dim SelectedToDoListItem As DOMICO.SL.Services.WebServiceMessageCenter.ToDoList = e.Items(0)
 
                ' Call Web Service to delete SQL data
 
            End If
        End If
 
    Catch ex As Exception
 
        Dim Problem As New DC.SL.Tools.Errors(ex)
 
    End Try
 
End Sub

Oh an another important thing to note, you can NOT make the GridView IsReadOnly="True" -- the event will not fire if it is, you must set IsReadOnly="False" and the set each column's IsReadOnly value and be sure that the column with the button is set to IsReadOnly="False".  Most of my GridView are typically read only with editing handle in a ChildWindow not in the Grid ... most of my end users find Grid's confusing to edit in, hence the ReadOnly GridView (presentation and deletion) to ChildWindow (editing/adding) approach.

You can also use the _Deleting event for a end user confirmation that they want to delete, if not, set e.Cancel = True.

Rob.
0
Pavel Pavlov
Telerik team
answered on 06 Sep 2012, 12:55 PM
Hi Rob ,

Here is another light alternative :

When you define the button this way :
<telerik:GridViewColumn.CellTemplate>
                       <DataTemplate>
                           <Button Content="Click Me" Click="Button_Click" />
                       </DataTemplate>
                   </telerik:GridViewColumn.CellTemplate>

You can trap the click event the following way :
private void Button_Click(object sender, RoutedEventArgs e)
       {
           var button = sender as Button;
           var Item = button.DataContext as Item;
       }

In the single event handler you can easily identify which is the relevant row , by checking the DataContext of the Button as shown above .

Greetings,
Pavel Pavlov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
GridView
Asked by
Rob Ainscough
Top achievements
Rank 1
Answers by
Rob Ainscough
Top achievements
Rank 1
Pavel Pavlov
Telerik team
Share this question
or