This is a migrated thread and some comments may be shown as answers.

combobox as suggestion/autocomplete from database

4 Answers 243 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Anthony
Top achievements
Rank 1
Anthony asked on 21 Aug 2014, 05:44 PM
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.

4 Answers, 1 is accepted

Sort by
0
Anthony
Top achievements
Rank 1
answered on 21 Aug 2014, 05:48 PM
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.
0
Rosen Vladimirov
Telerik team
answered on 22 Aug 2014, 10:30 AM
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.
 
0
Anthony
Top achievements
Rank 1
answered on 22 Aug 2014, 03:15 PM
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.
0
Rosen Vladimirov
Telerik team
answered on 22 Aug 2014, 03:22 PM
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.
 
Tags
ComboBox
Asked by
Anthony
Top achievements
Rank 1
Answers by
Anthony
Top achievements
Rank 1
Rosen Vladimirov
Telerik team
Share this question
or