RadButton Visible only on Row Selection or Mouse Over

6 posts, 0 answers
  1. Michael
    Michael avatar
    11 posts
    Member since:
    Oct 2013

    Posted 29 Jan 2015 Link to this post

    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!


  2. Boris
    Admin
    Boris avatar
    276 posts

    Posted 03 Feb 2015 Link to this post

    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.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Boris
    Admin
    Boris avatar
    276 posts

    Posted 05 Feb 2015 Link to this post

    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.

     
  5. Michael
    Michael avatar
    11 posts
    Member since:
    Oct 2013

    Posted 05 Feb 2015 in reply to Boris Link to this post

    Boris,

    This is perfect!!!

    Nice Work and Much Appreciated!!!

    MikeF 
  6. Michael
    Michael avatar
    11 posts
    Member since:
    Oct 2013

    Posted 20 Mar 2015 Link to this post

    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 








     
  7. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 25 Mar 2015 Link to this post

    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.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready