Respond to a button click for a column with button?

3 posts, 0 answers
  1. Rob Ainscough
    Rob Ainscough avatar
    262 posts
    Member since:
    Jan 2010

    Posted 05 Sep 2012 Link to this post

    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. Rob Ainscough
    Rob Ainscough avatar
    262 posts
    Member since:
    Jan 2010

    Posted 06 Sep 2012 Link to this post

    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.
  3. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 06 Sep 2012 Link to this post

    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.

Back to Top