Articles in this section

How to change the visibility of UIElement loaded in UWP Datagrid?

You can manage the visibility of a UIElement by using the UIElement.Visibility property in UWP DataGrid. 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


Conclusion

I hope you enjoyed learning about how to change the visibility of UIElement loaded in UWP Datagrid.

You can refer to our UWP DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our UWP DataGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied