close radcombobox popup when focus other window/app or move the window

1 Answer 42 Views
ComboBox
mh
Top achievements
Rank 1
mh asked on 26 Mar 2022, 08:00 AM

Hi

we tried to change template for radcombobox. but encountered a problem.

when popup is shown and try to move window or focus other window/app, it remains open. note that we set OpenDropdownOnFocus and IsEditable to true

we use c#, wpf, .net core

thanks


<Style TargetType="telerik:RadComboBox"> <Setter Property="TextSearchMode" Value="Contains"/> <Setter Property="IsFilteringEnabled" Value="true"/> <Setter Property="OpenDropDownOnFocus" Value="True"/> <Setter Property="EditableTemplate"> <Setter.Value> <ControlTemplate TargetType="telerik:RadComboBox"> <Grid> <telerik:RadToggleButton Name="ToggleButton" Background="{TemplateBinding Background}" Foreground="{StaticResource _comboboxForeground}" Template="{StaticResource MyRadToggleButton}" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"> </telerik:RadToggleButton> <ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" /> <TextBox x:Name="PART_EditableTextBox" Margin="5,1,25,1" Style="{StaticResource _Panel_TextBoxStyle}" Background="Transparent" BorderThickness="0" VerticalAlignment="Center"/> <Popup Name="Popup" Grid.ColumnSpan="2" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide"> <Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}"> <Border Grid.ColumnSpan="2" Grid.RowSpan="2" x:Name="DropDownBorder" SnapsToDevicePixels="True" MaxWidth="{TemplateBinding ActualWidth}" BorderThickness="0" BorderBrush="White"/> <ScrollViewer Grid.ColumnSpan="2" ScrollViewer.CanContentScroll="False" Grid.Row="1" SnapsToDevicePixels="True"> <StackPanel IsItemsHost="True" Background="{StaticResource _comboboxPopupBackground}" > </StackPanel> </ScrollViewer> </Grid> </Popup> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsFocused" Value="False"> <Setter Property="IsDropDownOpen" Value="False"/> </Trigger> <DataTrigger Binding="{Binding ElementName=PART_EditableTextBox, Path=IsFocused}" Value="false"> <Setter Property="IsDropDownOpen" Value="False"/> </DataTrigger> <DataTrigger Binding="{Binding ElementName=ToggleButton, Path=IsChecked}" Value="True"> <Setter Property="FocusManager.FocusedElement" TargetName="PART_EditableTextBox" Value="{Binding ElementName=PART_EditableTextBox}"/> </DataTrigger> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="ToggleButton" Property="Background" Value="{StaticResource _comboboxHover}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

1 Answer, 1 is accepted

Sort by
0
Accepted
Dilyan Traykov
Telerik team
answered on 29 Mar 2022, 03:10 PM

Hi,

Thank you for the provided code snippet.

By default, a Popup's StaysOpen property is True which is why it is not closed in this case. You can explicitly set the property to False to have it closed when it loses focus.

<Popup Name="Popup" StaysOpen="False" ...

Alternatively, you can change back the Name of the popup to PART_Popup to keep the additional functionality which is achieved in code behind through the GetTemplateChild method.

<Popup Name="PART_Popup" ...

Please note that this is why we do not recommend removing or renaming any of the elements in the control templates which contain the "PART_" prefix. This has been documented here: Editing Control Templates.

I do hope any of these approaches works for you.

Regards,
Dilyan Traykov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

mh
Top achievements
Rank 1
commented on 30 Mar 2022, 06:35 AM

Hi

thank you for providing a great answer.

Note that if you choosed first way you need to also add

focusable="false"

for "dropdown" grid.

I could n't access the default template using VS and could not find it in files. I like to recommend that telerik provides default template in web, if possible.

thanks and wish you the bests

Dilyan Traykov
Telerik team
commented on 30 Mar 2022, 08:19 AM

Hi,

I'm glad to hear that you found my answer helpful.

As for providing the default templates online, this will not be feasible as the templates differ from theme to theme. We do provide a separate archive in the Downloads section of your Telerik account, namely - Telerik_UI_for_WPF_{version}_Themes.zip - which provides all of these styles and templates.

Tags
ComboBox
Asked by
mh
Top achievements
Rank 1
Answers by
Dilyan Traykov
Telerik team
Share this question
or