combobox as suggestion/autocomplete from database

5 posts, 0 answers
  1. Anthony
    Anthony avatar
    13 posts
    Member since:
    Aug 2014

    Posted 21 Aug 2014 Link to this post

    I'm able to get items from a database into a combobox, but it's querying way too much data. Also, the selected item isn't displaying the string I expected. Instead, it's showing the object type as a string. I clearly don't understand something and I'm stuck even though I'm following this.

    Database table name = CityCountyState, e.g.

    City      County     State
    --------- ---------  ---------
    City1     County1    State1
    City1     County2    State1
    City2     County3    State2
    City3     County4    State3


    A city can be in more than one county, which is why I want to use a complex data template:

    01.<DataTemplate x:Key="ComboBoxCustomTemplate">
    02.  <Grid Margin="0,2,0,2">
    03.    <Grid.ColumnDefinitions>
    04.      <ColumnDefinition />
    05.      <ColumnDefinition />
    06.    </Grid.ColumnDefinitions>
    07.    <Grid.RowDefinitions>
    08.      <RowDefinition />
    09.      <RowDefinition />
    10.    </Grid.RowDefinitions>
    11.    <TextBlock TextAlignment="Left" Grid.ColumnSpan="2" Text="{Binding City}" />
    12.    <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal">
    13.      <TextBlock Text="County: " />
    14.      <TextBlock Foreground="Blue" Text="{Binding County}" />
    15.    </StackPanel>
    16.    <StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
    17.      <TextBlock Text="State: " />
    18.      <TextBlock Foreground="Blue" Text="{Binding State}" />
    19.    </StackPanel>
    20.  </Grid>
    21.</DataTemplate>


    Combo box XAML:

    1.<telerik:RadComboBox
    2.    IsEditable="True"
    3.    StaysOpenOnEdit="True"
    4.    ItemsSource="{Binding Path=CitiesCountiesStates}"
    5.    SelectedItem="{Binding Path=SelectedCityCountyState}"
    6.    OpenDropDownOnFocus="True"
    7.    IsFilteringEnabled="True"
    8.    ItemTemplate="{StaticResource ComboBoxCustomTemplate}" />


    Viewmodel:

    01.public class AddEditViewModel : ViewModelBase<IDialogView>, IDisposable
    02.{
    03.  private readonly GeotechLogContext context;
    04. 
    05.  public ObservableCollection<CityCountyState> CitiesCountiesStates { get; set; }
    06.  private string _SelectedCityCountyState;
    07.  public string SelectedCityCountyState
    08.  {
    09.    get
    10.    {
    11.      return this._SelectedCityCountyState;
    12.    }
    13.    set
    14.    {
    15.      // This doesn't work, but it's what I want to do in concept.
    16.      //  Value is always a string that equals the object type
    17.      //
    18.      //   CityCountyState x = (CityCountyState) value;
    19.      //   this._SelectedCityCountyState = x.City + "," + x.County + "," + x.State;
    20.      this._SelectedCityCountyState = value;
    21.    }
    22.  }
    23. 
    24.  public AddEditViewModel : base( new AddEditWindow() )
    25.  {
    26.    this.context = new GeotechLogContext();
    27.    this.CitiesCountiesStates = new ObservableCollection<CityCountyState>
    28.      (this.context.CityCountyStates.ToList<CityCountyState>() );
    29.  }
    30.}

    The problem is obviously at line 27/28, but I don't know how to do it.
  2. Anthony
    Anthony avatar
    13 posts
    Member since:
    Aug 2014

    Posted 21 Aug 2014 in reply to Anthony Link to this post

    I attached pictures to show how it looks in the view.

    Something I forgot to mention is that I don't want there to be anything in the box unless letters have been typed. That will prevent a database query that will return the entire list of cities I think. I want the combobox to automatically open the suggestion pop-out that matches on city names, but still shows the county and state information as well. Internally, I need to save the city, county, and state into another table, so I will need to access all three pieces of information. I think that means I need a private CityCountyState object, which I can later reference when I want to save/insert the row into another database table.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 22 Aug 2014 Link to this post

    Hello Anthony,

    In order to search by any property when you are using IsEditable="True", you have to set TextSearch.TextPath property to a property of your CityCountyState class, for example:
    <telerik:RadComboBox TextSearch.TextPath="City"
                IsEditable="True"
                StaysOpenOnEdit="True"
                SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                OpenDropDownOnFocus="True"
                IsFilteringEnabled="True"
                ItemTemplate="{StaticResource ComboBoxCustomTemplate}"
                ItemsSource="{Binding Cities}" VerticalAlignment="Center"/>

    This way the filtering will be applied based on the city property and once you have selected an item, only the value of its City property will be shown in RadComboBox.

    I've prepared a sample project based on your code, which shows how to use TextSearch.TextPath. The selected item will be persisted in the SelectedItem property of the ViewModel, so you can access it whenever you need it.

    Hope this helps.

    Regards,
    Rosen Vladimirov
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  5. Anthony
    Anthony avatar
    13 posts
    Member since:
    Aug 2014

    Posted 22 Aug 2014 in reply to Rosen Vladimirov Link to this post

    Thanks. That actually helps a lot. How would I make it display the city, county, and state in the box after selection? Also, I would want to search the combined string. Do I need to add a column in my database that combines the three fields? It seems like there should be an easier way that doesn't require messing with the data.

    I think what I'm asking is basically how to keep the dropdown the same, but to change how the combobox displays the selected value. It's only showing city, so it seems like I would need to add a member to my datacontext, but that can't be the right way to do this. If I had a combined member of my viewmodel that was searchable, I could also use the input text as the search field like 'contains' so if the user entered a county name, it would still bring up several matches.
  6. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 22 Aug 2014 Link to this post

    Hello Anthony,

    There is an easy way to show more than one field in editable RadComboBox. You can take a look at this blog post, which explains in details how you can achieve this. Also you can download a runnable project from our SDK repository.

    Hope this helps.

    Regards,
    Rosen Vladimirov
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
UI for WPF is Visual Studio 2017 Ready