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

Control button visibility based on row data values?

6 Answers 131 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Rob Ainscough
Top achievements
Rank 1
Rob Ainscough asked on 10 Apr 2013, 04:55 PM
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

6 Answers, 1 is accepted

Sort by
0
Accepted
Maya
Telerik team
answered on 11 Apr 2013, 06:24 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Rob Ainscough
Top achievements
Rank 1
answered on 11 Apr 2013, 08:41 AM
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.




0
Accepted
Maya
Telerik team
answered on 11 Apr 2013, 08:51 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Rob Ainscough
Top achievements
Rank 1
answered on 11 Apr 2013, 09:39 AM

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.

 
                           <!-- 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.





0
Rob Ainscough
Top achievements
Rank 1
answered on 11 Apr 2013, 09:46 AM

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

0
Maya
Telerik team
answered on 11 Apr 2013, 10:37 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
GridView
Asked by
Rob Ainscough
Top achievements
Rank 1
Answers by
Maya
Telerik team
Rob Ainscough
Top achievements
Rank 1
Share this question
or