I am trying to develop a custom Angular UI component with a separate search bar in the options popup. (It is the same as Kendo Dropdown-List's search bar ). The expected UI design is shown below. Unfortunately, after referring to your documentation and threads, we realized that Multi-Select-List had not been our expecting feature.
In this case, the Custom Multi-Select-List component should fill the below points.
- The default filter bar should be read-only.
- A new text box should introduce at the top of the options list (in the popup) for the filter options.
- The above text box wants to set autofocus when the dropdown toggles.
- The dropdown icon should place on the right side of the component.
- Items should be checkable and multi-selectable.
I am able to customize Multi-Select-List using HeaderTemplateDirective as a work-around. We put Kendo textbox in the header of the options popup. But unfortunately, it was not focusable. The popup immediately disappeared when we tried to focus using the angular component side.
Please help me to develop this custom component