[Solved] How to conditionally display RowDetailsTemplate based on a property on the row DataContext

[Geoff Hardy]

In our RadGridView, we have a RowDetailsTemplate which we only wish to show if the bound property "Messages" has a value. The DataTemplate looks like this:

        <TelerikGrid:RadGridView.RowDetailsTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Messages}"                            Visibility="{Binding Text,RelativeSource={RelativeSource Self},Converter={StaticResource visibleWhenNonEmptyConverter}}"/>
            </DataTemplate>
        </TelerikGrid:RadGridView.RowDetailsTemplate>

To hide the messages TextBox when there are no messages, we use a converter called visibleWhenNonEmptyConverter, which is defined as follows:

    public class VisibleWhenNonEmptyConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null && !"".Equals(value))
            {
                return Visibility.Visible;
            }
            return Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

This works reasonably well, except we need the row details to be completely hidden, but it is still several pixels high and has a blue border around it. The grid has its GridLinesVisibility property set to Vertical, and the row details are causing horizontal lines to be visible.The attached screen shot shows this problem - the first row has a Messages property set, but the other 3 rows have Messages set to null.

Is there a better way to implement this? The Messages property gets updated in the background and it implements INotifyPropertyChanged, so when it changes, the row details would need to become visible again.

[Rossen Hristov]

Hi Geoff Hardy,

I believe that in a custom scenario like yours, it will be better to play the DetailsVisibility property of each particular GridViewRow. This property allows you to control the details visibility of a particular row and effectively overrides the global visibility setting of RadGridView. You can learn more about this inheritance mechanism in the Row Details documentation topic.

So what you can do it attach to the RowLoaded event and create a Binding between the row's DetailsVisibility property and the business object property that it depends on, in this case Text. Your business object can be found as the DataContext of the row. Since your business object implements INotifyProperty change, if you the Text changes to string.Empty the DetailsVisiblity should change to Collapsed. And vice versa. Again, you will need to use a converter. This should do the trick.

For a similar example, that controls the DetailsVisibility of each particular row through a toggle button (in your case this will be the Text prop of the data item) please check out my blog post. Another great post that plays with the DetailsVisibility property is this one.

Let me know if there are any problems or difficulties.

All the best,
Ross
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Geoff Hardy]

Thanks for the advice Ross. We implemented this as follows:

        private void RadGridView_RowLoaded(object sender, RowLoadedEventArgs e)
        {
            // The row details should only be visible if Message has a value. There does not appear to be a way
            // to do this binding in XAML.
            var row = e.Row as GridViewRow;
            if (row != null)
            {
                var binding = new Binding("Messages")
                                  {
                                      Converter = _visibleWhenNonEmptyConverter
                                  };
                row.SetBinding(GridViewRow.DetailsVisibilityProperty, binding);
            }
        }