Custom tooltips in Search ?

[Barry]

Hi,

 

I'm looking to get custom tooltips for the "X"'s in the search, as well as add a watermark in the search textbox.

I'm not seeing any properties for this int he XAML...please advise.

 

Barry

[Dinko | Tech Support Engineer]

Hello Barry,

Thank you for the provided attached picture.

The achieve your requirement you can extract and edit the default template of the GridViewSearchPanel. You can take a look at the Editing Control Templates help article which describes how to get the default template of the controls. In your cast, after you have extracted the template you can add ToolTip to the "ClearButton" and the "CloseButton". As for the watermark. You can replace the native TextBox with a RadWatermarkTextBox control. Check the attached project.

Regards,
Dinko
Progress Telerik

[Barry]

Hi Dinko !...thanks for the great answer. I was just wondering there's a way to get it into this override:

  <Style TargetType="telerik:GridViewSearchPanel">
            <Setter Property="MaxWidth" Value="500"></Setter>
            <Setter Property="Width" Value="auto"></Setter>
            <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
        </Style>

We use this already, so if there a way to add ToolTips to the "ClearButton" and the "CloseButton" through that, it would be great.

Thanks...Barry

[Dinko | Tech Support Engineer]

Hi Barry,

Adding ToolTip to the ClearButton and CloseButton would be possible by extracting and modifying the default template of the GridViewSearchPanel. This is the only known approach which I can offer you with the current implementation of the control.

Regards,
Dinko
Progress Telerik

[Barry]

For use by others:

 

       <!-- OVERRIDE TO ALLOW FOR TOOLTIPS FOR THE BUTTONS IN THE SEARCH PANEL -->
        <Style TargetType="telerik:GridViewSearchPanel">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:GridViewSearchPanel}">
                        <Grid UseLayoutRounding="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2">
                                <Border BorderBrush="#FFEFF6FF" BorderThickness="1" Background="{TemplateBinding Background}"/>
                            </Border>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="10,0,0,0" telerik:LocalizationManager.ResourceKey="GridViewSearchPanelTopText" TextWrapping="Wrap" Text="XXX" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"><Run Text="ZZZ"/></TextBlock>
                                <Grid Grid.Column="1" Margin="10,0" VerticalAlignment="Center">
                                    <Grid.Triggers>
                                        <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ClearButton">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Visible</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                        <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ClearButton">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Collapsed</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </Grid.Triggers>
                                    <TextBox x:Name="PART_SearchAsYouTypeTextBox" IsTabStop="{Binding IsTabStop, RelativeSource={RelativeSource TemplatedParent}}" MaxWidth="200" MinWidth="160" MinHeight="20" Padding="3,3,15,3" Text="{Binding SearchText, Mode=TwoWay}" telerik:TextBoxBehavior.UpdateTextOnEnter="True">
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme/>
                                        </telerik:StyleManager.Theme>
                                    </TextBox>
                                    <telerik:RadButton x:Name="ClearButton" Command="searchPanel:GridViewSearchPanelCommands.ClearSearchValue" IsTabStop="False" InnerCornerRadius="0" Visibility="Collapsed">
                                        <telerik:RadButton.Style>
                                            <Style TargetType="{x:Type telerik:RadButton}">
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="{x:Type telerik:RadButton}">
                                                            <Border x:Name="ButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                                                <Path Data="M1,0L4,3 7,0 8,1 5,4 8,7 7,8 4,5 1,8 0,7 3,4 0,1z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Height="8" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0" VerticalAlignment="Center" Width="8"/>
                                                            </Border>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                                <Setter Property="ToolTip" Value="{x:Static properties:Resources.ClearSearch}"/>
                                                <Setter Property="Background" Value="#01FFFFFF"/>
                                                <Setter Property="BorderThickness" Value="0"/>
                                                <Setter Property="Width" Value="20"/>
                                                <Setter Property="Height" Value="20"/>
                                                <Setter Property="HorizontalAlignment" Value="Right"/>
                                                <Setter Property="VerticalAlignment" Value="Center"/>
                                                <Setter Property="Foreground" Value="Black"/>
                                                <Style.Triggers>
                                                    <Trigger Property="IsMouseOver" Value="True">
                                                        <Setter Property="Foreground" Value="#FFFFC92B"/>
                                                    </Trigger>
                                                    <Trigger Property="IsPressed" Value="True">
                                                        <Setter Property="Foreground" Value="#FFFFC92B"/>
                                                    </Trigger>
                                                </Style.Triggers>
                                            </Style>
                                        </telerik:RadButton.Style>
                                    </telerik:RadButton>
                                </Grid>
                            </Grid>
                            <telerik:RadPathButton x:Name="CloseButton" ToolTip="{x:Static properties:Resources.CloseSearch}" Grid.Column="1" Command="telerik:RadGridViewCommands.CloseSearchPanel" HorizontalAlignment="Right" Height="22" IsTabStop="False" IsBackgroundVisible="False" InnerCornerRadius="0" Margin="0,5,5,5" Padding="7" PathGeometry="M1,0L4,3 7,0 8,1 5,4 8,7 7,8 4,5 1,8 0,7 3,4 0,1z" VerticalAlignment="Center" Width="22"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="MaxWidth" Value="500" />
            <Setter Property="Width" Value="auto" />
            <Setter Property="MinHeight" Value="32"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="10,0,3,0"/>
            <Setter Property="BorderThickness" Value="1,1,1,0"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFDFDFDF" Offset="1"/>
                        <GradientStop Color="#FFBABABA"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="#FF848484"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
        </Style>