RadAutoCompleteBox in RadDataForm

[Rob]

Hello,

On UI for Windows Phone, how would I specify that I want a certain DataField to use a RadAutoCompleteBox rather than the standard list picker? I have a DataField with many thousands of items, so I would like to use AutoComplete instead.

(The following still shows the standard list picker)

           <telerikInput:RadDataForm x:Name="RadDataForm1"  ValidationMode="OnValueChanged" CommitMode="OnFieldValueChange" >
                <Grid>
                    <telerikInput:DataField TargetProperty="MeterId" Header="Meter" >
                        <telerikInput:DataField.EditorStyles>
                            <Style TargetType="telerikInput:RadAutoCompleteBox" >
                            </Style>
                        </telerikInput:DataField.EditorStyles>
                    </telerikInput:DataField>
               </Grid>
            </telerikInput:RadDataForm>

[Deyan]

Hi Rob,

AutoCompleteBox is not supported out-of-the-box. You will need to define your own custom editor which is a very simple task.

For more information take a look at our documentation here:

Defining Custom Editors in DataForm

I hope this helps.

Regards,
Deyan
Telerik

 

 

[Rob]

Hello, I have defined a custom editor used by my RadDataForm, which is a RadAutoCompleteBox. This works, except the value of the RadAutoCompleteBox only updates my model after I call RadDataForm.Commit. I am trying to have it update my model when the RadAutoCompleteBox text changes but cannot figure out how to accomplish. (don't see a way to set UpdateSourceTrigger on the RadAutoCompleteBox. See below:

// snippet from RadDataForm
<telerikInput:DataField TargetProperty="MeterId">
    <telerikInput:DataField.CustomEditor>
        <telerikDataForm:CustomEditor>
            <local:CustomEditorAutoComplete
                    telerikDataForm:CustomDataField.EditorValuePath="Value"
                    telerikDataForm:CustomDataField.IsEditor="True"/>
        </telerikDataForm:CustomEditor>
    </telerikInput:DataField.CustomEditor>
</telerikInput:DataField>

// xaml for CustomEditorAutoComplete
<UserControl x:Class="PocketPEO.CustomEditorAutoComplete"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input" xmlns:Models="clr-namespace:PocketPEO.Models"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <telerikInput:RadAutoCompleteBox x:Name="autocomplete" AutoCompleteMode="StartsWith">        
        </telerikInput:RadAutoCompleteBox>
    </Grid>
</UserControl>

// class
public partial class CustomEditorAutoComplete : UserControl
{
    public CustomEditorAutoComplete()
    {
        InitializeComponent();
        this.autocomplete.SuggestionsSource = new MeterInfoProvider().ItemsSource;
        autocomplete.TextChanged += autocomplete_TextChanged;
    }

    void autocomplete_TextChanged(object sender, TextChangedEventArgs e)
    {
        String text = autocomplete.Text;
        Value = text;
    }

    string _value = "";
    public String Value
    {
        get { return _value; }
        set { _value = value;  }
    }
}

[Rosy Topchiyska]

Hi Rob,

If you wish to immediately update the the model properties, you can set the RadDataForm.CommitMode property to OnFieldValueChange. For more information you can see this article from our online documentation: Handling Values and Committing

I hope this helps.

Regards,
Rosy Topchiyska
Telerik

 

 

[Rob]

Yes, my RadDataForm CommitMode is already set to OnFieldValueChanged. This works for all fields except the custom editor / RadAutoCompleteBox (as described earlier in the post). For the RadAutoCompleteBox, even with CommitMode set to OnFieldValueChanged, the value still does not get set back to my business object until I call Commit on RadDataForm.

[Rosy Topchiyska]

Hi Rob,

I apologize for the misunderstanding. Unfortunately, the DataForm does not support such functionality out of the box. If you do not wish to call the DataForm.Commit method when the Text property of the AutoCompleteBox is changed, there is a possible workaround that I have demonstrated in the attached project.

I hope this helps. Please, let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik