How to change the order of selected values?

[Jingesh]

• If multiple selections are made on the dropdown menu, the field saves and displays the selections in the order in which they were selected. For example, if the user selected Rate, Kaplan-Meier, and # (in that specific order), the field will display the selections as Rate, Kaplan-Meier, and #. Instead of displaying multiple selections based on the order in which they were selected, we'd like to standardize the order based on the order as presented in the dropdown menu. In the same example scenario above, the proper display for the selections made above should be #, Rate, Kaplan-Meier. Please find attachment for reference.

• Could you please tell me How to change the order of selected values?

Attachment: MultiSelect_bbe4ba36.rar

[Prince Oliver]

Hello Jingesh, 

Greetings from Syncfusion support. 

Currently items will be displayed on the input element based on the selection and reorder is not supported by default. But we can customize the behavior in the popup close event, by reordering the items in the selected items in the input based on the popup elements. Kindly refer to the following code. 

onClose(e){ 

    let activeEle: any = this.mulObj.ulElement.querySelectorAll('li.e-active'); 

    let reorderEle: any = (this.mulObj as any).popupObj.element.querySelectorAll('ul.e-reorder li.e-active'); 

    reorderEle = Array.prototype.slice.call(reorderEle); 

    activeEle = Array.prototype.slice.call(activeEle); 

    activeEle = (reorderEle.length > 0 && activeEle.length > 0) ? reorderEle.concat(activeEle) : (reorderEle.length > 0) ? reorderEle : activeEle; 

    let reOderVal: any = []; 

    for (let i: number = 0; i < activeEle.length; i++) { 

        reOderVal.push((activeEle[i] as HTMLElement).innerText); 

    } 

    let label: any = (this.mulObj as any).delimiterWrapper.nextElementSibling; 

    let splitEle: any; 

    if (label.querySelector('.e-remain')) { 

        splitEle = label.innerHTML.split('<span'); 

        reOderVal.splice(splitEle[0].split(',').length); 

        splitEle[0] = reOderVal; 

        let ele1: any = splitEle[0].toString(); 

        let ele2: any = '<span' + splitEle[1]; 

        label.innerHTML = ele1 + ele2; 

    } else { 

        splitEle = label.innerHTML.split(','); 

        label.innerHTML = reOderVal.toString(); 

    } 

    this.mulObj.value = (this.mulObj.value as any).sort(); 

} 

We have attached an example for your reference, please find it in the following location 

https://stackblitz.com/edit/angular-shtexa-gb72te 

Let us know if you need any further assistance on this. 

Regards, 

Prince  

[Jingesh]

Hi Prince,

Thanks for your support.

I want this functionality on Select event. Is it possible? How?

Regard,

Jignesh

[Prince Oliver]

Hello Jingesh, 

Good day to you. 

No, it is not possible to use Select event. Since the Select event triggers immediately when an item in the popup is selected, the selected values will not be updated in the control’s model as well as in the UI elements. Hence it is not possible to change the order of the values in that event. This solution work only with Close or Change event. 

Let us know if you need any further assistance on this. 

Regards, 

Prince