Autocomplete and images

[Ralf]

Hello,

I've used the RadDropDownList with style "DropDown". So I can use the autocomplete behavior. So far so good.
Each progammatically added item has an image (48x48). Wenn I opens the dropdown the items will be displayed with image.
But when I enter some text the matched items in the dropdown will be not displayed with image. Why?

Also the selected item will be not displayed with image. Only when I change the dropdown style to "DropDownList" the image will be displayed also. But then there is no possibility to use autocomplete behavior. That's bad.

As workaround I change the dropdown style on the fly. When clicking the control I change the style like:

private void CountrySelector_MouseClick(object sender, MouseEventArgs e)
{
this.CountrySelector.DropDownStyle = Telerik.WinControls.RadDropDownStyle.DropDown;
  this.CountrySelector.DropDownListElement.ShowImageInEditorArea = false;
}

Now I can use the autocomplete behavior.

And in SelectedIndex_Changed event method I change the style to "DropDownList" like:

private void CountrySelector_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
{
  this.CountrySelector.DropDownListElement.ShowImageInEditorArea = true;
  this.CountrySelector.DropDownStyle = Telerik.WinControls.RadDropDownStyle.DropDownList;
}

Then the selected item image will be displayed.

Cool. But I need to display the image of matched items in dropdown when entering text using the autocomplete behavior.
How to?

Regards,
Ralf

[Dimitar]

Hi Ralf,

Thank you for contacting Telerik support.

If I understand clearly, you want to display an image in the autocomplete popup. You can do that by subscribing to the VisualItemFormatting event of the corresponding dropdown and add the images there:

void DropDownList_VisualItemFormatting(object sender, VisualItemFormattingEventArgs args)
{
    args.VisualItem.Image = Resources.icon.GetThumbnailImage(20, 20, null, IntPtr.Zero);
}

Also you can subscribe to this event with the following line of code:

radDropDownList1.DropDownListElement.AutoCompleteSuggest.DropDownList.VisualItemFormatting+=DropDownList_VisualItemFormatting;

I hope this will be useful. Should you have further questions, I would be glad to help.

Regards,
Dimitar
Telerik

[Ralf]

Hello Dimitar,

thank you very much for Information.
This is what I need.

Maybe It's a good idear to implement a property to activate/deactivate this behavior in one of the next releases....


Best regards,
Ralf 

[Stefan]

Hi Ralf,

Can you please clarify what this property should activate/deactivate as I am not sure I understand what do you mean? Thank you.

Regards,
Stefan
Telerik

[Ralf]

Hello Stefan,

instead to subscribe an event and assign Images to the matching items in the dropdown, it would be easier to activate/deactivate this behavior by a property if autocomplete mode is activated.
For example if ther is an property like
DropDownList.ImagesShowMode = ImagesShowModes.Never | ImagesShowModes.Allways | ImagesShowModes.DropDonwListOnly
or similar it's easier to use the control and we can spend more time implement business logic instead do much design.

Or easier the control should be have the same behavior in both modes "DropDown" and "DropDownList". So when I add Images to the items they should be shown even autocomplete mode is activated and control mode was set to "DropDown".
Then the selected item should be have a visible image and all matching items too. Not only the items in the "normal" dropdown.

Best regards,

Ralf

[Stefan]

Thank you for the clarification Ralf. Currently, the control semantics are a bit different than your suggestion, however, if we receive more requests for such a behavior, we will consider it for a future release.

Should you have any other questions or suggestions, do not hesitate to contact us.

Regards,
Stefan
Telerik