combobox as suggestion/autocomplete from database

[Anthony]

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.

[Anthony]

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.

[Rosen Vladimirov]

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

 

 

[Anthony]

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.

[Rosen Vladimirov]

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