How to bind tooltip to RadTreeViewItem

5 posts, 0 answers
  1. Mickaël
    Mickaël avatar
    7 posts
    Member since:
    Aug 2010

    Posted 19 Sep 2011 Link to this post

    Hello,

    I've been using RadTreeView control and am very pleased about it so far.
    Yet I have an issue I couldn't solve myself : I'm binding a collection to the "ItemsSource" property of the RadTreeView.
    I'd like one of the properties of the objects I'm binding to be the tooltip of the RadTreeViewItem (or the row if you speak "visually") and couldn't find a way to do it...

    Can you help me ?
    I hope I was clear. If not, don't hesitate to ask for further information.

    Thanks in advance.
    Sincerely,
    Mickaël Derriey
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 22 Sep 2011 Link to this post

    Hello Mickaël,

     You can set the Tooltip in the DataTemplate that you use in the TreeVIew like so:

    <DataTemplate x:Key="itemteplate">
                    <TextBlock Text="{Binding Name}">
                        <ToolTipService.ToolTip>
                            <ToolTip>
                                <ToolTip.Content>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Tooltip " />
                                        <TextBlock Text="{Binding Id}" />
                                    </StackPanel>
                                </ToolTip.Content>
                            </ToolTip>
                        </ToolTipService.ToolTip>
                    </TextBlock>
                </DataTemplate>
    It is also important to set HorizontalContentAlignment to Stretch so that the tooltip appears when you MouseOver the whole RadTreeViewItem, not only the TextBlock .
    <Style TargetType="telerik:RadTreeViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>

    Hope this helps you.

    Greetings,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Shirly
    Shirly avatar
    4 posts
    Member since:
    Apr 2013

    Posted 22 Apr 2013 Link to this post

    Hi,
    In case TreeViewItem row include more then one element of text , still th tooltip won't show if mouse is not on text control that includes the tooltip:
    <DataTemplate x:Key="itemteplate">
                   <Grid x:Name="grid" Height="30">
                       <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="*"/>
                           <ColumnDefinition Width="400"/>
                       </Grid.ColumnDefinitions>
                         
                       <TextBlock Grid.Column="0" Text="{Binding Name}">
                           <ToolTipService.ToolTip>
                               <ToolTip>
                                   <ToolTip.Content>
                                       <StackPanel Orientation="Horizontal">
                                           <TextBlock Text="Tooltip " />
                                           <TextBlock Text="{Binding Id}" />
                                       </StackPanel>
                                   </ToolTip.Content>
                               </ToolTip>
                           </ToolTipService.ToolTip>
                       </TextBlock>
                       <TextBlock  Grid.Column="1" Text="This is more text.."/>
                   </Grid>
               </DataTemplate>

    Do you have any suggestion what to do in such case?

    Thanks,
    Shirly.
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 24 Apr 2013 Link to this post

    Hi Shirly,

    I'm not sure I understand what you need to implement. But if you need to display a Tooltip on the entire RadTreeViewItem, then it might be better to apply the ToolTip on each RadTreeViewItem through a Style setter like this:
    <Style TargetType="telerik:RadTreeViewItem">
        <Setter Property="ToolTipService.ToolTip">
            <Setter.Value>
                <ToolTip>
                    <ToolTip.Content>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Tooltip " />
                            <TextBlock Text="{Binding Id}" />
                        </StackPanel>
                    </ToolTip.Content>
                </ToolTip>
            </Setter.Value>
        </Setter>
    </Style>

    Please give this a try and let me know if this is what you had in mind.

    All the best,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Shirly
    Shirly avatar
    4 posts
    Member since:
    Apr 2013

    Posted 24 Apr 2013 Link to this post

    Thanks. It worked for me!
Back to Top
DevCraft banner