We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to change the order of selected values?

  • 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 RateKaplan-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-MeierPlease find attachment for reference.

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

Attachment: MultiSelect_bbe4ba36.rar

3 Replies

PO Prince Oliver Syncfusion Team May 22, 2019 06:47 AM UTC

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. 

    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'); 
        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 

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


JI Jingesh May 22, 2019 01:24 PM UTC

Hi Prince,

Thanks for your support.

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


PO Prince Oliver Syncfusion Team May 23, 2019 06:07 AM UTC

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. 


Live Chat Icon For mobile
Up arrow icon