MultiSelect with drag and drop of selected items to reorder them

[Murray]

Is it possible to do this? 

I see I can customise individual items, but they would need to be in a Sortable container in order for drag / drop to work. Is there any way of achieving this?

Thanks

 

[Martin]

Hi Murray,

In general, the MultiSelect component does not support drag&drop to its tags. However, the desired functionality could be achieved by using the Sortable component (which supports drag and drop as you already explored) and some custom CSS code. Here is an example of such implementation:

https://stackblitz.com/edit/angular-gdbcz1-ykk3fg?file=app/app.component.ts

Basically, I hide the default MultiSelect input element, using some custom styles, and bind the selected items to the Sortable component. Nevertheless, this implementation relies on custom implementation that is not included in our testing process and we cannot guarantee it will continue to work as expected with newer versions. It might need further modifications in order to meet the requirements of the use case.

I hope the provided suggestions will shed some more light on this case. Please let us know if any further assistance is required.

Regards,
Martin
Progress Telerik

[adRom]

is this still the preferred solution to this? or can this now be achieved in a better/easier way? 

[Martin]

Hi Norbert,

The MultiSelect doesn't provide a built-in drag and drop functionality of its selected items:

Please cast your vote for the following feature request:

https://feedback.telerik.com/kendo-angular-ui/1361947-reorder-functionality-for-the-selected-items-in-multiselect-component

Here is the demo with the updated Angular version (17) and the latest Kendo package versions (15.4.0):

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

The other approach is to use tag template with Kendo Angular Drag & Drop utility. However, in this case, the reordering behavior is entirely left in the hands of the developer:

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

I hope this helps.