Tooltip in SelectionBoxTemplate

2 posts, 0 answers
  1. Kalli Kaldi
    Kalli Kaldi avatar
    27 posts
    Member since:
    Oct 2011

    Posted 25 Apr 2014 Link to this post

    Hi.

    I'm trying to display a Tooltip on a Label within a SelectionBoxTemplate on a ComboBox, like this :

    <telerik:RadComboBox Name="cmbBranchInfo" Height="22" VerticalAlignment="Top" Width="202"
                         IsEditable="False" SelectedIndex="0" ClearSelectionButtonVisibility="Visible"
                         ItemsSource="{Binding Path=BranchInfoItems}"
                         DropDownClosed="cmbBranchInfo_DropDownClosed"
                         LostFocus="cmbBranchInfo_LostFocus">
        <telerik:RadComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <CheckBox IsChecked="{Binding Checked, Mode=TwoWay}" Content="{Binding BranchInfoDisplayText}"
                              telerik:StyleManager.Theme="Windows8" Click="checkboxBranchId_Click"/>
                </StackPanel>
            </DataTemplate>
        </telerik:RadComboBox.ItemTemplate>
        <telerik:RadComboBox.EmptySelectionBoxTemplate>
            <DataTemplate>
                <telerik:Label Content="Veldu útibú" FontStyle="Italic"/>
            </DataTemplate>
        </telerik:RadComboBox.EmptySelectionBoxTemplate>
        <telerik:RadComboBox.ClearSelectionButtonContent>
            <telerik:Label Content="Ekkert val" FontStyle="Italic"/>
        </telerik:RadComboBox.ClearSelectionButtonContent>
        <telerik:RadComboBox.SelectionBoxTemplate>
            <DataTemplate>
                <telerik:Label Content="{Binding Path=DataContext.SelectedBranchesDisplay, RelativeSource={RelativeSource AncestorType=UserControl}}"
                               ToolTipService.ToolTip="Test the Tooltip">
                     
                </telerik:Label>
            </DataTemplate>
        </telerik:RadComboBox.SelectionBoxTemplate>
    </telerik:RadComboBox>

    I know I can display the Tooltip on the Combobox itself, but what if the SelectionBoxTemplate would be like this (this is from another Combobox) :

    <telerik:RadComboBox.SelectionBoxTemplate>
        <DataTemplate>
            <!--<TextBlock Name="statusComboTextBlock"
                    Text="{Binding  DataContext.SelectedStatusText, Mode=OneWay, RelativeSource={RelativeSource AncestorType=UserControl}}" />-->
            <StackPanel Orientation="Horizontal" Margin="5,0">
                <telerik:Label Content="Staða" IsTabStop="False" FontStyle="Italic" />
     
                <ItemsControl HorizontalAlignment="Left" FlowDirection="LeftToRight"
                              ItemsSource="{Binding Path=DataContext.StatusCodesSelected, Mode=OneWay, RelativeSource={RelativeSource AncestorType=UserControl}}" >
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Image Name="selectedStatusImage" Height="20" Width="20" ToolTipService.Placement="Top"
                                   Source="{Binding Path=DisplayColor, Converter={StaticResource ColorToStatusIconConverter}}">
                                <ToolTipService.ToolTip>
                                    <ToolTip Content="{Binding StatusDescription, RelativeSource={RelativeSource AncestorType=Image}}" BorderThickness="2"/>
                                </ToolTipService.ToolTip>
                            </Image>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
     
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
    </telerik:RadComboBox.SelectionBoxTemplate>

    Here, the Tooltip would be the description for each of the Images in the ItemsControl, depending on the position of the mouse.

    Any ideas from you guys ?

    Best regards,
    Kalli
  2. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 28 Apr 2014 Link to this post

    Hi Karl,

    This will not work, as the Label inside the template is not receiving the MouseOver and hence it doesn't show its ToolTip. To make it work you will have to set the ToolTip to the ComboBox. In order to display some data from the business object, you will have to bind it to the SelectedItem. For example:

    <telerik:RadComboBox Name="cmbBranchInfo"
                                Height="22"
                                VerticalAlignment="Top"
                                Width="202"
                                IsEditable="False"
                                SelectedIndex="0"
                                DisplayMemberPath="Name"
                                SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                                telerik:RadToolTipService.ToolTipContent="{Binding SelectedItem.Zip}"
                                ItemsSource="{Binding Agencies}"
                                ClearSelectionButtonVisibility="Visible">
           </telerik:RadComboBox>

    Attached I am sending you a sample project illustrating this.
    Hope this helps.

    Regards,
    Konstantina
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. DevCraft banner
Back to Top