Reordering List using Multiselect dropdown check box

Question

Hello Team,I am using the Multiselect dropdown check box component to select multiple items.I need  reorder using drag and drop functionality in dropdown list items.I have a few question:How do I intercept the drop action?Can I get the new order of the list?

Sevvandhi Nagulan · Accepted Answer

Hi Sneha,

Greetings from Syncfusion support.

We have checked the reported requirement. We would like to inform you that we have enableSelectionOrder property, that reorders the selected item after selecting the value. The default value is true. If you disable the enableSelectionOrder property then, the selected value will appear in the same place itself. Please refer the below code,

<ejs-multiselect id='multiselect-checkbox' #checkbox [dataSource]='countries' [placeholder]='checkWaterMark'

[fields]='checkFields' [mode]='mode' [popupHeight]='popHeight' [showDropDownIcon]='true' showSelectAll='true'

[filterBarPlaceholder]='filterPlaceholder' [enableSelectionOrder]='true'></ejs-multiselect>

https://stackblitz.com/edit/angular-aqrpah-dyzqii?file=app.component.html

Also, we would like to inform you that when you select the value from the list item and popup will get closed after the component has lost focus. So, if you reorder any list item means the selection will be preserved when you open it again. But we have the same use case in the Listbox component, where we don't have popup. So, list items will visible always. Hence, we suggest using the ListBox for your requirement.

ListBox link: https://ej2.syncfusion.com/angular/demos/#/material/list-box/drag-and-drop

Regards,

Sevvandhi N

sneha · Answer

Thank you so much for the solutions. How can i get the reordered list. the entire array of objects in re ordered structure.

for ex:

public countries = [

{ Name: 'Australia', Code: 'AU', value: 'false' },

{ Name: 'Bermuda', Code: 'BM', value: 'false' },

{ Name: 'Canada', Code: 'CA', value: 'false' },

{ Name: 'Cameroon', Code: 'CM', value: 'false' },

{ Name: 'Denmark', Code: 'DK', value: 'false' },

];

After selection

public countries = [

{ Name: 'Cameroon', Code: 'CM', value: 'true' },

{ Name: 'Denmark', Code: 'DK', value: 'true' },

{ Name: 'Australia', Code: 'AU', value: 'false' },

{ Name: 'Bermuda', Code: 'BM', value: 'false' },

{ Name: 'Canada', Code: 'CA', value: 'false' },

];

Sevvandhi Nagulan · Answer

Hi Sneha, 
 
You can get the reordered list using the ‘e-reorder’ class in the open event. Refer to the below code and sample. 
 
 




    onOpen(e){ 
        let reOrderList = []; 
        setTimeout(()=>{     
          let reOrderElement= document.querySelectorAll('.e-list-parent.e-ul.e-reorder .e-list-item'); 
       for(let i =0;i<reOrderElement.length;i++){ 
         reOrderList.push({Name:(reOrderElement[i] as any).innerText , Code: reOrderElement[i].getAttribute("data-value")}) 
       } 
   }, 30); 
     
    console.log("Reordered list is:",reOrderList); 
      } 
 
 
Sample: https://stackblitz.com/edit/angular-aqrpah-gq2pmc?file=app.component.ts 
 
 
Regards, 
Sevvandhi N