EditableTemplate Mask with Autocomplete

[Björn]

Hello Support-Team,

i'd like to customize the RadComboBox to have a masked input with autocompletion.

 
<telerik:RadComboBox x:Name="maskedComboBox"
 ItemsSource="{Binding Path=ValuesViewModel.ExistingValues}"
 DisplayMemberPath="ValueName" SelectedValuePath="ValueId"
 SelectedValue="{Binding Path=ValuesViewModel.SelectedValue, UpdateSourceTrigger=PropertyChanged}"
 CanAutocompleteSelectItems="True" IsFilteringEnabled="True" TextSearchMode="StartsWith"
 OpenDropDownOnFocus="True" IsEditable="True"
 EditableTemplate="{DynamicResource MaskedComboBoxEditableTemplate}" />

As far as I've read the only way to reach that is to customize the EditableTemplate,
so I used Blend to get me a copy to work on.
At first I exchanged the original PickerTextBox PART_EditableTextBox simply with a
RadMaskedTextBox, which of course didn't work out the way I wanted.
So I unsuccessfully tried to find a nice example, in which someone needed the same or a similar customization.

Because of that I decided to leave the PickerTextBox the way it is and just show a MaskedTextBox instead of
the PickerTextBox and bind the MaskedTextBox.Value-property to the PickerTextBox.Text-property.
That at least worked for the filtering, but I lost theOpenDropDownOnFocus, most likely because I need the
focus on the PickerTextBox.

Code snippet of PART_EditableTextBox:

<telerik:PickerTextBox x:Name="PART_EditableTextBox"

 BorderThickness="{TemplateBinding BorderThickness}"

 Background="{TemplateBinding Background}"

 Grid.Column="0"Visibility="Collapsed"


 HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"

 IsReadOnly="{TemplateBinding IsReadOnly}"

 Padding="{TemplateBinding Padding}"

 VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

 Text="{Binding ElementName=maskedTextBox, Path=Value, Mode=TwoWay}" >

 <telerik:StyleManager.Theme>

  <telerik:Office_BlackTheme/>

 </telerik:StyleManager.Theme>

</telerik:PickerTextBox>

 

<Controls:RadMaskedTextBox x:Name="maskedTextBox"

 Grid.Column="0"

 Mask="{Binding Path=SizeChartViewModel.SizeChartMask.Mask}"

 MaskType="Standard"

 SelectionOnFocus="CaretToBeginning"

 BorderThickness="{TemplateBinding BorderThickness}"

 Background="{TemplateBinding Background}"

 HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"

 IsReadOnly="{TemplateBinding IsReadOnly}" Padding="{TemplateBinding Padding}"

 VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">

 <telerik:StyleManager.Theme>

  <telerik:Office_BlackTheme/>

 </telerik:StyleManager.Theme>

</Controls:RadMaskedTextBox>

Is there any better approach to customize the ComboBox to get what I need?
Or is there any workaround to get my changes of the EditableTemplate to work the way I want it to?

Thank you!

[Valeri Hristov]

Hi Björn,

RadComboBox requires PART_EditableTextBox to be a TextBox, or a class that is a descendant of TextBox (PickerTextBox is a ). In other words RadMaskedTextBox is not suitable for use in the control template of RadComboBox.

Regards,
Valeri Hristov
the Telerik team

[Björn]

Hello Valeri,

thanks for the quick reply. I guess I'll work with a mask behavior instead.

Best regards

Björn