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

RadButton Visible only on Row Selection or Mouse Over

5 Answers 349 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 29 Jan 2015, 03:29 PM
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!


5 Answers, 1 is accepted

Sort by
0
Boris
Telerik team
answered on 03 Feb 2015, 01:51 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Boris
Telerik team
answered on 05 Feb 2015, 02:02 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Michael
Top achievements
Rank 1
answered on 05 Feb 2015, 02:47 PM
Boris,

This is perfect!!!

Nice Work and Much Appreciated!!!

MikeF 
0
Michael
Top achievements
Rank 1
answered on 20 Mar 2015, 02:29 PM
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 








 
0
Vanya Pavlova
Telerik team
answered on 25 Mar 2015, 08:10 AM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
Buttons
Asked by
Michael
Top achievements
Rank 1
Answers by
Boris
Telerik team
Michael
Top achievements
Rank 1
Vanya Pavlova
Telerik team
Share this question
or