RadAutoCompleteBox in RadDataForm

6 posts, 1 answers
  1. Rob
    Rob avatar
    11 posts
    Member since:
    Jan 2013

    Posted 05 May 2014 Link to this post

    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>
  2. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 08 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Rob
    Rob avatar
    11 posts
    Member since:
    Jan 2013

    Posted 23 Oct 2014 in reply to Deyan Link to this post

    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;  }
        }
    }
  5. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 27 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Rob
    Rob avatar
    11 posts
    Member since:
    Jan 2013

    Posted 27 Oct 2014 in reply to Rosy Topchiyska Link to this post

    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.
  7. Answer
    Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 29 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner