EditableTemplate Mask with Autocomplete

3 posts, 0 answers
  1. Björn
    Björn avatar
    3 posts
    Member since:
    Apr 2011

    Posted 24 May 2011 Link to this post

    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}"
     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
     IsReadOnly="{TemplateBinding IsReadOnly}"
     Padding="{TemplateBinding Padding}"
     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
     Text="{Binding ElementName=maskedTextBox, Path=Value, Mode=TwoWay}" >
    <Controls:RadMaskedTextBox x:Name="maskedTextBox"
     Mask="{Binding Path=SizeChartViewModel.SizeChartMask.Mask}"
     BorderThickness="{TemplateBinding BorderThickness}"
     Background="{TemplateBinding Background}"
     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
     IsReadOnly="{TemplateBinding IsReadOnly}" Padding="{TemplateBinding Padding}"
     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">

    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!

  2. Valeri Hristov
    Valeri Hristov avatar
    2252 posts

    Posted 25 May 2011 Link to this post

    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.

    Valeri Hristov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
  4. Björn
    Björn avatar
    3 posts
    Member since:
    Apr 2011

    Posted 26 May 2011 Link to this post

    Hello Valeri,

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

    Best regards

Back to Top