[Solved] Row Details "lazy" loading

[Fred Zhao]

...is not working. User has to click on one row then another then come back to make the template visible. Please see the xaml below:

        <telerikGridView:RadGridView x:Name="ProjectsGrid" 

ItemsSource="{Binding Projects, Mode=TwoWay}" 

                                     SelectedItem="{Binding SelectedProject, Mode=TwoWay}"

                                     RowDetailsVisibilityMode="VisibleWhenSelected"

IsReadOnly="True"

                                  AutoGenerateColumns="False" 

ColumnsWidthMode="Fill"

CanUserFreezeColumns="False"

VerticalGridlinesVisibility="Collapsed" 

                                     GridLinesVisibility="Horizontal" 

                                     CanUserReorderColumns="False" 

                                     CanUserInsertRows="False" 

ShowGroupPanel="True" 

IsBusy="{Binding IsLoading}" 

                                 UseAlternateRowStyle="True" 

RowIndicatorVisibility="Collapsed" 

AutoExpandGroups="True"

                                 Margin="0"

FontFamily="{StaticResource Arial}" 

FontSize="{StaticResource 8pt}" 

FontWeight="{StaticResource Bold}" 

Foreground="{StaticResource #002664}">

            <telerikGridView:RadGridView.Columns>

                <telerikGridView:GridViewDataColumn .... />

            </telerikGridView:RadGridView.Columns>

            

            <telerikGridView:RadGridView.RowDetailsTemplate>

                <DataTemplate>

                    <localviews:ProjectInfoView />

                </DataTemplate>

            </telerikGridView:RadGridView.RowDetailsTemplate>

        </telerikGridView:RadGridView>

[Rossen Hristov]

Hello Fred Zhao,

There is a certain issue with the SelectedItem binding and we are currently working on it. As a temporary workaround you will need to set the selected item after the data has been fully loaded in the DataLoaded event handler.

<UserControl x:Class="TicketID_258337_RowDetailsLazyLoad.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid>
    <telerik:RadGridView Name="clubsGrid"
                         SelectedItem="{Binding SelectedClub, Mode=TwoWay}"
                         ItemsSource="{Binding Clubs, Mode=TwoWay}"
                         RowDetailsVisibilityMode="VisibleWhenSelected"
                         IsReadOnly="True"
                         AutoGenerateColumns="False"
                         ColumnsWidthMode="Auto">
      <telerik:RadGridView.RowDetailsTemplate>
        <DataTemplate>
          <TextBlock Height="100">Here are the Row Details!</TextBlock>
        </DataTemplate>
      </telerik:RadGridView.RowDetailsTemplate>
      <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn Header="Name"
                                    DataMemberBinding="{Binding Name}">
        </telerik:GridViewDataColumn>
        <telerik:GridViewDataColumn Header="Est."
                                    DataMemberBinding="{Binding Established}"
                                    DataFormatString="{}{0:yyyy}">
        </telerik:GridViewDataColumn>
        <telerik:GridViewDataColumn Header="Stadium"
                                    DataMemberBinding="{Binding StadiumCapacity}"
                                    DataFormatString="{}{0:N0}">
        </telerik:GridViewDataColumn>
      </telerik:RadGridView.Columns>
    </telerik:RadGridView>
  </Grid>
</UserControl>

And the code-behind:

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.GridView;
using Telerik.Windows.Data;

namespace TicketID_258337_RowDetailsLazyLoad
{
    public partial class MainPage : UserControl
    {
        private readonly ViewModel viewModel;

        public MainPage()
        {
            InitializeComponent();

            this.viewModel = new ViewModel();
            this.clubsGrid.DataContext = this.viewModel;
            this.clubsGrid.DataLoaded += new System.EventHandler<System.EventArgs>(clubsGrid_DataLoaded);
        }

        void clubsGrid_DataLoaded(object sender, System.EventArgs e)
        {
            // Set the selected item after the data has been loaded!
            this.viewModel.SelectedClub = this.viewModel.Clubs[1];
        }

        public class ViewModel : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;

            private ObservableCollection<Club> clubs;
            private Club selectedClub;

            public ObservableCollection<Club> Clubs
            {
                get
                {
                    if (this.clubs == null)
                    {
                        this.clubs = Club.GetClubs();
                    }

                    return this.clubs;
                }
            }

            public Club SelectedClub
            {
                get { return this.selectedClub; }
                set
                {
                    if (value != this.selectedClub)
                    {
                        this.selectedClub = value;
                        this.OnPropertyChanged("SelectedClub");
                    }
                }
            }

            protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
            {
                PropertyChangedEventHandler handler = this.PropertyChanged;
                if (handler != null)
                {
                    handler(this, args);
                }
            }

            private void OnPropertyChanged(string propertyName)
            {
                this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

I have prepared and attached a sample project that demonstrates this. Let me know if there are any problems with it.

Regards,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Fred Zhao]

Hi Ross,

Thanks for the reply. I've applied the workaround (setting selected item in grid dataloaded event handler) but the problem persists. In the example you gave the row details template does not contain dynamic data however in our project the template content is dynamic and consists of usercontrol with its own viewmodel etc... Is there a hotfix available soon? Thanks.

Fred

[Rossen Hristov]

Hi Fred Zhao,

What do you mean by "dynamic" and what is the exact problem? Can you send me a fully runnable sample project and point out what the problem is and how to reproduce it.

You can take a look at the Row Details example -- the data is not static there.

Sincerely yours,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.