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
3 Answers, 1 is accepted
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
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
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
Rank 1
Iron
<kendo-multiselect
#multiselect
>
<ng-template kendoSuffixTemplate>
<button
kendoButton
(click)="handleToggleClick(multiselect)"
fillMode="flat"
[svgIcon]="svgDownIcon"
></button>
</ng-template>
</kendo-multiselect> public handleToggleClick(multiselect: MultiSelectComponent): void {
multiselect.focus();
multiselect.toggle();
}
Hi Richard,
I can confirm that using the kendoSuffixTemplate is the most straightforward approach to adding an icon in order to mimic the design of the DropDownList. The adornments are new additions to the component of the DropDowns package.