Display RadGridView Row Details in RadWindow

As you know, in order to display Row Details outside RadGridView, you need to place a DetailsPresenter control somewhere around RadGridView and wire them up. Well, it does not need to be around, really. This article will show how to place it in Telerik’s RadWindow:

this.DataContext = new FootballViewModel(); 
 
this.window = new RadWindow(); 
this.window.Content = new DetailsPresenter() 
{ 
    // Link the external details presenter to our RadGridView. 
    DetailsProvider = this.clubsGrid.RowDetailsProvider 
}; 
this.window.WindowStartupLocation = WindowStartupLocation.Manual; 
this.window.Header = "Players"; 
this.window.ResizeMode = ResizeMode.NoResize; 
this.clubsGrid.RowDetailsProvider.PropertyChanged += this.OnRowDetailsProviderPropertyChanged; 

The DetailsPresenter cares about three things – what is the DataTemplate it needs to load, whether it is visible or not, and what is its DataContext. All this information comes through its DetailsProvider property which is assigned from RadGridView’s respective property RowDetailsProvider. This means that this particular DetailsPresenter will be fed by this particular RadGridView. Let’s take a look at the interface:

public interface IDetailsProvider : INotifyPropertyChanged 
{ 
    DataTemplate Template { get; } 
    Visibility Visibility { get; } 
    object DataContext { get; } 
    //Rest of the code is omitted 
} 

As you can see, it inherits from the INotifyPropertyChanged interface. Each time a row is selected in RadGridView, the DataContext of the DetailsProvider changes. The DetailsPresenter listens for these property changes and updates as needed. We can listen for a PropertyChanged ourselves and position the window accordingly:

private void OnRowDetailsProviderPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) 
{ 
    if (e.PropertyName == "DataContext") 
    { 
        // This indicates that selection has changed in RadGridView. 
        Club currentClub = this.clubsGrid.RowDetailsProvider.DataContext as Club; 
        if (currentClub != null) 
        { 
            // A row is selected. 
            var row = this.clubsGrid.ItemContainerGenerator.ContainerFromItem(currentClub) as GridViewRow; 
            Point newLocation = this.CalculateWindowLocation(row); 
            // Show the window next to the row on the right 
            this.window.Left = newLocation.X; 
            this.window.Top = newLocation.Y; 
            this.window.Show(); 
        } 
        else 
        { 
            // There is no selection. 
            this.window.Close(); 
        } 
    } 
} 
 
private Point CalculateWindowLocation(GridViewRow row) 
{ 
    throw new NotImplementedException(); 
} 

That’s about all you need to do. You can download a sample project from here.

See Also

• RowDetails - OverviewRadWindow - Overview