We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the visibility of UIElement loaded in the GridTemplateColumn based on the row data?

Platform: WPF |
Control: SfDataGrid

You can manage the visibility of a UIElement by using the UIElement.Visibility property. Similarly, you can also change the visibility of the UIElement loaded in the GridTemplateColumn based on the row data. This is demonstrated in the following code example.

C#

public class VisibilityConverter:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var values = (Model)value;
        //Enables the visibility of an Ellipse UIElement when the country name is Germany, otherwise it hides from the view.
        if (values.Country == "Germany")
            return Visibility.Visible;
        return Visibility.Hidden;
    }
    public object ConvertBack(object value, Type targetType, object parameter,    System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

 

The converter is bound to the Visibility property of an Ellipse UIElement as follows.

XAML

<syncfusion:GridTemplateColumn Width="100"
                                HeaderText="TemplateColumn"
                                MappingName="Country"
                                SetCellBoundValue="False">
    <syncfusion:GridTemplateColumn.CellTemplate>
        <DataTemplate>
            <!--Ellipse is loaded in the display mode of the GridTemplateColumn-->.
            <Ellipse Width="30"
                        Height="20"
                        Fill="Red"
                        Visibility="{Binding Converter={StaticResource visibilityConverter}}" />
        </DataTemplate>
    </syncfusion:GridTemplateColumn.CellTemplate>
</syncfusion:GridTemplateColumn>

The visibility of an ellipse is enabled when the country name is Germany as shown in the following screenshot.

 

UIElement visibility is displayed based on the data

Figure 1: UIElement visibility is displayed based on the data

Sample Links:

WPF

WinRT

WP

UWP

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile