How To: Tooltip Row Details with RadGridView for Silverlight

Saturday, December 19, 2009 by Rossen Hristov | Comments 8

In my previous blog post I explained how to display RadGridView Row Details with a RadWindow. Several days after the post was published I received a suggestion to create another sample that will be showing Row Details in a mouse-over tooltip fashion. And guess what. Christmas came earlier this year.

The full credit for coming up with this brilliant idea goes to my friend and colleague Kalin Milanov, our Front-end Developer. He decided to edit the GridViewRow ControlTemplate and removed the DetailsPresenter from the spot it usually occupies under the cells. He then placed it inside a ToolTip:

   1: <ToolTipService.ToolTip>
   2:     <ToolTip Style="{StaticResource ToolTipStyle}" 
   3:              Opened="OnToolTipOpened"
   4:              Closed="OnToolTipClosed">                            
   5:         <grid:DetailsPresenter 
   6:             x:Name="PART_DetailsPresenter" 
   7:             DetailsProvider="{Binding DetailsProvider, RelativeSource={RelativeSource TemplatedParent}}" 
   8:             telerik:StyleManager.Theme="{StaticResource Theme}"/>
   9:     </ToolTip>
  10: </ToolTipService.ToolTip>

There was a minor problem though. Row Details are collapsed, unless specified otherwise. So we attached to the Opened and Closed events of the ToolTip, found the respective GridViewRow and made its details Visible or Collapsed respectively:

   1: private void OnToolTipOpened(object sender, RoutedEventArgs e)
   2: {
   3:     GridViewRow parentRow = this.GetParentRow(sender);
   4:     parentRow.DetailsVisibility = Visibility.Visible;
   5: }
   6:  
   7: private void OnToolTipClosed(object sender, RoutedEventArgs e)
   8: {
   9:     GridViewRow parentRow = this.GetParentRow(sender);
  10:     parentRow.DetailsVisibility = Visibility.Collapsed;
  11: }
  12:  
  13: private GridViewRow GetParentRow(object sender)
  14: {
  15:     ToolTip toolTip = (ToolTip)sender;
  16:     Popup popup = (Popup)toolTip.Parent;
  17:     Club club = (Club)popup.DataContext;
  18:     GridViewRow parentRow = (GridViewRow)this.clubsGrid.ItemContainerGenerator.ContainerFromItem(club);
  19:     return parentRow;
  20: }

Unfortunately, the ugly casting and searching above was inevitable. I wish the Owner property of the ToolTip class was public. Please, Microsoft, at least the getter. Anyway, here is what we got (it may take a while to load):

 

I just love ControlTemplates. Fabulous stuff.

You can get the full source code from here.

8 Comments

  • Ben Hayat 19 Dec 2009
    Rossen, thank you for taking the time and responding to my humble request. Great outcome!

    As far as feedback goes, since SL is considered a RIA Client platform, I think things like this (with mouse hover) will show the power of SL, where ASP.Net can't compete with the performance.

    I think the grid should have built in for mouse over for the image fields with URL or fields that have long text, where you get a tooltip or popup showing the long text in the box. The line items is even one step above and makes it complete.

    Thanks!
    ..Ben
  • Rossen Hristov 19 Dec 2009
    Hello Ben,

    Thank you for the kind words.

    Silverlight + WCF RIA Services is the future and we are doing our best to keep up the pace.

    Once again, I would like to thank you for your constructive feedback.
  • Ben Hayat 21 Dec 2009
    Why isn't this blog showing as part of daily blogs? Actually I've seen this problem, where I know of a direct link to a blog but it does not show in the daily listing. Is this a bug in the blog system?
    ..Ben
  • Rossen Hristov 22 Dec 2009
    When I write a blog it gets scheduled for publishing on the main blogs page which might take a day or two depending on the queue. But the blog is visible on my home page from the moment I publish it.
  • Ben Hayat 22 Dec 2009
    Just wanted to make sure people didn't miss this blog!
    ..Ben
  • silverlight 26 Dec 2009
    oh,yes,your blog is in my bookmark.
  • Vikas 18 Jun 2010
    Hi,
        Thanks so much for the wonderful idea you have shared. I also needed it in my code, I have tried this but only challenge i am facing is, how to keep the records in Grid editable. Like for your example, what should i do to keep records in Clubs grid as editable?
  • Rossen Hristov 18 Jun 2010
    I am afraid that with this implementation F2 would be the only way to start editing the grid.

Add comment

  1. Formatting options
       
     
     
     
     
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)