RadButton Visible only on Row Selection or Mouse Over

[Michael]

I have a RadButton located on a RadGridView in order to delete rows.

I would prefer not to have the button display on each row by default.

Instead, I would like the "Delete" button only be visible when the row has been selected or on row mouse over. 

Is this possible?

Any assistance on this is Much Appreciated!

[Boris]

Hello Michael,

A possible way to show your "Delete" button when the row is selected is to define a style targeting the GridViewCell and use triggers to determine if the cell is selected:

<Style x:Key="customCellStyle" TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellStyle}">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <telerik:RadButton Command="telerik:RadGridViewCommands.Delete" Content="Delete This row" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

Please keep in mind that by default the SelectionUnit property of RadGirdView is set to "FullRow" and that is why this works.

I attached a sample project that demonstrates the suggested above approach.

As for your second scenario when the mouse is over the row, I am afraid that for the time being I cannot suggest you a solution.

I hope this helps.

Regards,
Boris
Telerik

 

 

[Boris]

Hi Michael,

I would like to inform you that we have found a better approach that can fulfill your requirement. In general you can put a button as a CellTemplate in the desired column and bind its Visibility property to the IsSelected or IsMouseOver properties of the parent GridViewRow. Then use the built-in BooleanToVisibilityConverter converter to convert the value of the mentioned properties.

<Window.Resources>
    <my:MyViewModel x:Key="MyViewModel" />

    <telerik:BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter" />
</Window.Resources>
<Grid DataContext="{StaticResource MyViewModel}">
    <telerik:RadGridView Name="clubsGrid"
                         Grid.Row="0"
                         Margin="5"
                         AutoGenerateColumns="False"
                         ItemsSource="{Binding Clubs}">
        <telerik:RadGridView.Columns>
            ...
            <telerik:GridViewDataColumn Header="IsMouseOver">
                <telerik:GridViewDataColumn.CellTemplate>
                    <DataTemplate>
                        <telerik:RadButton Command="telerik:RadGridViewCommands.Delete"
                                           CommandParameter="{Binding}"
                                           Content="Delete"
                                           Visibility="{Binding IsMouseOver,
                                                                RelativeSource={RelativeSource AncestorType={x:Type telerik:GridViewRow}},
                                                                Converter={StaticResource booleanToVisibilityConverter}}" />
                    </DataTemplate>
                </telerik:GridViewDataColumn.CellTemplate>
            </telerik:GridViewDataColumn>
            <telerik:GridViewDataColumn Header="IsSelected">
                <telerik:GridViewDataColumn.CellTemplate>
                    <DataTemplate>

                        <telerik:RadButton Command="telerik:RadGridViewCommands.Delete"
                                           CommandParameter="{Binding}"
                                           Content="Delete"
                                           Visibility="{Binding IsSelected,
                                                                RelativeSource={RelativeSource AncestorType={x:Type telerik:GridViewRow}},
                                                                Converter={StaticResource booleanToVisibilityConverter}}" />
                    </DataTemplate>
                </telerik:GridViewDataColumn.CellTemplate>
            </telerik:GridViewDataColumn>
        </telerik:RadGridView.Columns>
    </telerik:RadGridView>
</Grid>

I attached an updated version of the previously attached project that demonstrates the suggested approach.


Regards,
Boris
Telerik

 

 

[Michael]

Boris,

This is perfect!!!

Nice Work and Much Appreciated!!!

MikeF 

[Michael]

This is a follow-up to my original post.

The code sample that you provided works great but I've come across several issues that require some tweaking
of the original requirement. Hopefully you can provide some assistance.

Original Requirement:
 - I would like the Delete button to display only on the selected RadGridView row -> done

Additional Requirements:

1. If the user does not have Edit privileges then the Delete button should never be visible (even if row selected).
2. Some rows are not allowed to be deleted even if the user has Edit access therefore the Delete button should not be visible upon selection.

This is my current binding syntax on the button:

Visibility="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type telerik:GridViewRow}}, Converter={StaticResource booleanToVisibilityConverter}}"

Bottom Line:
Is it possible to bind visibility against an additional property in my ViewModel that will determine if the selected row is deletable in addition to the IsSelected property?

If this multi property binding is not feasible then can the IsEnabled property of the button be bound to a property on the ViewModel?

Any assistance on this Much Appreciated!

MikeF 

 

[Vanya Pavlova]

Hello Michael,


You are on the right way. The Visibility property of the button could be bound to a property of your ViewModel that will determine whether the row is in a specific state(s) based on some custom logic. 
Hope this helps. 


Regards,
Vanya Pavlova
Telerik