multiselect with icon of choosing

[Shani]

Hi, I'm trying to create a multi-select item that will have the outside look & behavior of a simple dropdown-list, including using icon of my choosing for the down arrow.

But I'm having trouble locating the icon, I've tried using plain css and play with the positions of the items, but then the icon doesn't stick to the corner of the multi-select wrapper..

Would like some help, I feel like maybe I'm doing it all wrong.

 

Here is my code:

https://stackblitz.com/edit/angular-kendo-multi-dropdown-look

[Martin]

Hi Shani,

Thank you for the provided example.

As the component does not include an arrow icon by design, this requires a custom implementation.

The developer can wrap the MultiSelect in a span and position an icon with CSS in that container's end.

Another necessary tweak would be to increase the padding-right value of the MultiSelect to reserve space for the clear icon. Then, you can hook to the click event and toggle the popup. It's also a good idea to prevent the icon element mousedown event default, to prevent it from stealing focus.

Here is an example:

https://stackblitz.com/edit/angular-xj7kxx

I hope this helps.

Regards,
Martin
Progress Telerik

[Shani]

Thank you so much! 

If anyone is interested, this is my final result, with some more tweaks and styling:

https://stackblitz.com/edit/angular-kendo-multi-dropdown-look-done