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

RadComboBox Editable with templates?

6 Answers 751 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Gord
Top achievements
Rank 1
Gord asked on 15 Apr 2016, 05:59 PM

Hello,

I have a RadComboBox that uses an ItemTemplate to style the content within the dropdown.  The ComboBox binds to a "lookup" object that has "Id", "Value", "FG" and "BG" properties.  "FG" is the foreground color (string) and "BG" is the background color (string).  Value is the display text, and Id is the underlying ID value of the object from the database.

I have the combobox bound to the actual Lookup object, rather than to a primitive, the ItemsSource is bound to another object which is a list of Lookup objects, and I have an item template:

<DataTemplate x:Key="lookupColor">
    <Label x:Name="lbl"
           Background="{Binding BG}"
           Content="{Binding Value}"
           Foreground="{Binding FG}"
           Margin="0">
    </Label>
</DataTemplate>

This works great for a standard combobox.  The background is filled in and text color is set properly in both the dropdown, and the items list.  But when I try to make the combobox editable, so the user can type the text to quickly select an item, the result shows the <bound class name string> in the textbox for the selected item, instead of the content value binding.  I even tried setting the "DisplayMemberPath" to "Value", but still nothing. 

I extracted the ComboBox template through expression blend, but there doesn't appear to be any binding on the textbox to control the content, leaving me to think the text is controlled by code.

Any ideas on this?

6 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 18 Apr 2016, 11:51 AM
Hi Gord,

First, you will need to set TextSearch.TextPath property of RadComboBox in order to set which property of the used Lookup object will be displayed in the input field. You could read more information about it inside Using TextSearch.TextPath section of the AutoComplete topic.
Additionally,  using TextBoxStyle property will help you style the input according to the specific requirements, the approach is explained inside the TextBoxStyle topic.

I hope this would be helpful. If you have any additional questions or issues, let us know.

Regards,
Yana
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Gord
Top achievements
Rank 1
answered on 18 Apr 2016, 12:19 PM

Hello Yana,

I tried your suggestion, but it doesn't appear to be working in my particular situation.  I probably should have explained that I'm using a GridViewComboBoxColumn, and the column is generated programmatically.

var col = new GridViewComboBoxColumn();
col.DataMemberBinding = new Binding("Column1");
col.ItemsSourceBinding = new Binding("LookupValues");

col.IsComboBoxEditable = true;

 col.ItemTemplate = (DataTemplate)Application.Current.Resources["lookupColor"];

col.EditorStyle = new Style(typeof(RadComboBox);
col.EditorStyle.BasedOn = new (Style)FindResource(typeof(RadComboBox));
col.EditorStyle.Setters.Add(new Setter { Property = RadComboBox.OpenDropDownOnFocusProperty, Value = true });
col.EditorStyle.Setters.Add(new Setter { Property = Telerik.Windows.Controls.TextSearch.TextPathProperty = "Lookup" });

I tried adding the TextPathproperty to the setters collection, but it didn't appear to resolve the issue.  I am still seeing the whole class name showing up in the textbox instead of the selected item, allthough I think that is related to the styling of the TextBox that you mentioned.  The other issue is that if I set "IsComboBoxEditable" to false,  I still cannot type while the combobox is focused and automatically select a value from the last based on the text.   Removing the ItemTemplate makes everything function normally.

The "lookupColor" template is defined as:

<DataTemplate x:Key="lookupColor">
    <DataTemplate.Resources>
        <conv:NullBrushConverter x:Key="NullBrushConverter" />
    </DataTemplate.Resources>
    <Label x:Name="lbl" Background="{Binding BackgroundColor, Converter={StaticResource NullBrushConverter}, ConverterParameter=Transparent}" Content="{Binding Lookup}" Foreground="{Binding TextColor, Converter={StaticResource NullBrushConverter}, ConverterParameter=Black}" Margin="0"></Label>
</DataTemplate>

the "NullBrushConverter" was something I created for cases when the "TextColor" or "BackgroundColor" properties of the data item are null, so that the brush has a working default value instead of causing an error.

0
Gord
Top achievements
Rank 1
answered on 18 Apr 2016, 12:25 PM
I forgot to mention, the "Column1" binding binds to a Lookup object in the dataset that is a reference to one of the items in the list of "LookupValues".  The Lookup object has "Id", "Lookup", "TextColor" and "BackgroundColor" properties.
0
Yana
Telerik team
answered on 21 Apr 2016, 11:03 AM
Hello Gord,

Thank you for sending the details on the case. We managed to reproduce the erroneous behavior and we are currently researching it.  I will write here as soon as we have more information on the matter.

Thank you for your patience.

Regards,
Yana
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Yana
Telerik team
answered on 21 Apr 2016, 01:07 PM
Hi Gord,

Actually the TextSearch.TextPath attached property should be set to the GridViewComboBoxColumn itself instead of the contained ComboBox, please try it like this:

col.SetValue(Telerik.Windows.Controls.TextSearch.TextPathProperty, "Lookup");

and let us know whether it's ok now.

I'm looking forward to your reply.

Regards,
Yana
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Gord
Top achievements
Rank 1
answered on 21 Apr 2016, 01:13 PM

Hello Yana,

That was the piece I was mising.  Works like a charm.  Thank you so much!  Setting the TextSearch.TextPathProperty now shows the correct value when the combobox column is editable, and also now properly quick-searches the combobox list even if it is not editable.

Thank you very  much.

Tags
ComboBox
Asked by
Gord
Top achievements
Rank 1
Answers by
Yana
Telerik team
Gord
Top achievements
Rank 1
Share this question
or