Control button visibility based on row data values?

[Rob Ainscough]

Here is what I'm trying to accomplish and can't seem to find any info on how I might be able to do this using Telerik GridView:

Button defined for a column, the button's visibility is turned On/Off based on values that populate the GridView's row.  I have NOT successfully been able to do this.  Could someone point me in a direction, link, code sample?

FYI, the data bound to the GridView is an ObservableCollection (of objects).

Here is a visual/sample of what I'm trying to accomplish (photoshopped out the X buttons that I'm trying to hide):

GridView sample

[Maya]

Hello Rob,

DataContext of the button will be its corresponding row. So, what you can do is to bind the visibility of the button through IValueConverter and return true/false depending on the value of the item in the Category column.  

Greetings,
Maya
the Telerik team

[Rob Ainscough]

I've setup the IValueConverter but don't really understand how I can Bind Visibility to it from a CellTemplate?

Some sample code that isn't working, see the ???? ...

SomeUserControl.xaml

<!-- Transactions -->
<telerik:RadGridView x:Name="TransactionGridView" Margin="0" FontSize="10.667" AreRowDetailsFrozen="True" AutoGenerateColumns="False" CanUserFreezeColumns="False" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserSortColumns="False" RowIndicatorVisibility="Collapsed" IsReadOnly="False" ShowGroupPanel="False" ItemsSource="{Binding Transactions}">

    <telerik:RadGridView.Columns>
        <telerik:GridViewToggleRowDetailsColumn />
        <telerik:GridViewDataColumn Header="TransactionID" IsVisible="False" DataMemberBinding="{Binding TransactionID}" />
        <telerik:GridViewDataColumn Header="UnitID" IsVisible="False" DataMemberBinding="{Binding UnitID}" />
    </telerik:RadGridView.Columns>

    <!-- TransactionDetails -->
    <telerik:RadGridView.RowDetailsTemplate>
        <DataTemplate x:Name="TransactionDetailsGridViewTemplate">
            <Grid Style="{StaticResource DCRowDetailBackground}">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"/>
                            <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="20"/>
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <telerik:RadGridView x:Name="TransactionDetailGridView" Margin="0" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="1" FontSize="10.667" MinHeight="10" MaxHeight="150" Height="Auto" RowHeight="16" Background="Transparent" BorderThickness="0" GridLinesVisibility="None" AreRowDetailsFrozen="True" AutoGenerateColumns="False" CanUserFreezeColumns="False" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserSortColumns="False" RowIndicatorVisibility="Collapsed" RowDetailsVisibilityMode="Collapsed"  IsReadOnly="False" ShowColumnHeaders="False"  ShowGroupPanel="False"
                                     ItemsSource="{Binding TransactionDetails}">

                    <telerik:RadGridView.RowStyle>
                        <Style TargetType="telerik:GridViewRow">
                            <Setter Property="Background" Value="Transparent" />
                        </Style>
                    </telerik:RadGridView.RowStyle>

                    <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn Header="TransactionID" IsVisible="False" DataMemberBinding="{Binding TransactionID}" />
                        <telerik:GridViewDataColumn Header="TransactionDetailID" IsVisible="False" DataMemberBinding="{Binding TransactionDetailID}" />
                        <telerik:GridViewDataColumn Header="UnitID" IsVisible="False" DataMemberBinding="{Binding UnitID}" />
                        <telerik:GridViewDataColumn Header="Unit" Width="80" IsReadOnly="True" DataMemberBinding="{Binding UnitMask}" />
                        <telerik:GridViewDataColumn Header="Description" Width="143" IsReadOnly="True" DataMemberBinding="{Binding Description}" />
                        <telerik:GridViewColumn UniqueName="WaiveFeeButtonColumn" CellTemplate="{StaticResource DCRadWaiveFeeButton}" FooterTextAlignment="Center" IsReadOnly="False" IsResizable="False" IsGroupable="False" IsFilterable="False" TextAlignment="Center" Width="100" Background="Transparent" HeaderTextAlignment="Center" IsSortable="False" IsReorderable="False" ShowDistinctFilters="False" />
                    </telerik:RadGridView.Columns>

                </telerik:RadGridView>

            </Grid>
        </DataTemplate>
    </telerik:RadGridView.RowDetailsTemplate>

</telerik:RadGridView>

APP.XAML

    <Helpers:WaiveFeeVisibilityConverter x:Key="waiveFeeVisibilityConverter" />

...

    <DataTemplate x:Key="DCRadWaiveFeeButton">
        <telerik:RadButton Content="Waive Fee"
            Padding="2"
            FontWeight="Bold"
            FontSize="12"
                    Visibility="{Binding  ????, Converter={StaticResource waiveFeeVisibilityConverter}}"
                    Command="telerik:RadGridViewCommands.Delete" CommandParameter="{Binding}"
            Template="{StaticResource DCRedDeleteButton}"
            ToolTipService.ToolTip="Delete Entry"
            Cursor="Hand" />
    </DataTemplate>

My IValueConverter WaiveFeeVisibilityConverter.vb

Imports System.Windows.Data
Imports System.Globalization

Public Class WaiveFeeVisibilityConverter
    Implements IValueConverter

    Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert

        Dim isVisible As Boolean = CBool(value)

        Return If(isVisible, System.Windows.Visibility.Visible, System.Windows.Visibility.Collapsed)

    End Function

    Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.ConvertBack

        Dim currVisibility As System.Windows.Visibility = CType(value, System.Windows.Visibility)

        Return (currVisibility = System.Windows.Visibility.Visible)

    End Function

Not really sure how to obtain the DataContext from my IValueConverter?  The code I have is just to convert "Boolean" True/False values to Visibility values.

FYI, using MVVM approach.

Thanks, Rob.

[Maya]

Hi Rob,

If the property you want the visibility of the button to depend on is called Category, then in the binding you can set it directly:

Visibility="{Binding  Category, Converter={StaticResource waiveFeeVisibilityConverter}}"

And in the converter you will get the value of the Category through the 'value' parameter in the Convert method. Then you can create the condition you require. For example:

var currentCategory = (string) value;
if(currentCategory == "MyCategory")
{
   return Visible;
}
else
{
  return Collapsed;
}

In case you skip the property:

Visibility="{Binding Converter={StaticResource waiveFeeVisibilityConverter}}"

You will get the whole data item through the 'value' parameter. 

Greetings,
Maya
the Telerik team

[Rob Ainscough]

I solved the problem of my button visibility ... I needed to use a GridViewDataColumn  (I also moved the CellTemplate and DataTemplate under the GridViewDataColumn (but I don't think that was necessary).

<telerik:GridViewDataColumn UniqueName="WaiveFeeButtonColumn" Header="Waive Fee" DataMemberBinding="{Binding WaiveFeeDescription}" FooterTextAlignment="Center" IsReadOnly="False" IsResizable="False" IsGroupable="False" IsFilterable="False" TextAlignment="Center" Width="100" Background="Transparent" HeaderTextAlignment="Center" IsSortable="False" IsReorderable="False" ShowDistinctFilters="False">
    <telerik:GridViewDataColumn.CellTemplate>
        <DataTemplate>
            <telerik:RadButton Content="Waive Fee"
                Padding="2"
                FontWeight="Bold"
                FontSize="12"
                Visibility="{Binding WaiveFeeDescription, Converter={StaticResource waiveFeeVisibilityConverter}}"
                Command="telerik:RadGridViewCommands.Delete" CommandParameter="{Binding}"
                Template="{StaticResource DCRedDeleteButton}"
                ToolTipService.ToolTip="Waive Fee"
                Cursor="Hand" />
        </DataTemplate>
    </telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>

Per your information, just need to check the value in my WaiveFeeVisibilityConverter.

Now, the only problem I have left is that Command="telerik:RadGridViewCommands.Delete" CommandParameter="{Binding}" - I can't seem to respond to the event as it appears to not use the DataContext I expected it to use.  The event happens, the row is deleted but I can't seem to trap the event -- I'm using SL5 Interactions and Interactivity DLLs.

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
   xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">

                           <!-- Events for GridView -->
                           <i:Interaction.Triggers>
                               <i:EventTrigger EventName="Deleting">
                                   <ei:CallMethodAction TargetObject="{Binding}" MethodName="DeletingFee" />
                               </i:EventTrigger>
                               <i:EventTrigger EventName="Deleted">
                                   <ei:CallMethodAction TargetObject="{Binding}" MethodName="DeletedFee" />
                               </i:EventTrigger>
                           </i:Interaction.Triggers>

I'm guessing my TargetObject on the CallMethodAction needs some adjustment?

Thanks for your help, Rob.

[Rob Ainscough]

Problem solved on the trapping of the RadGridViewCommands.Delete.  I was correct, I need to adjust the TargetObject of the CallMethodAction.

<ei:CallMethodAction TargetObject="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType=UserControl}}" MethodName="DeletingFee" />

Thanks again for your help.

Rob

[Maya]

Hi Rob,

I am really glad to see that you resolved the issues. Let me know in case you have any additional troubles with the grid. 

Regards,
Maya
the Telerik team