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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the order of selected values?

Thread ID:

Created:

Updated:

Platform:

Replies:

144764 May 21,2019 02:41 PM UTC May 23,2019 06:07 AM UTC Angular - EJ 2 3
loading
Tags: MultiSelectDropdown
Jingesh
Asked On May 21, 2019 02:41 PM UTC

  • 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

Prince Oliver [Syncfusion]
Replied On 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. 

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 

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

Regards, 
Prince  


Jingesh
Replied On May 22, 2019 01:24 PM UTC

Hi Prince,

Thanks for your support.

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


Regard,
Jignesh

Prince Oliver [Syncfusion]
Replied On 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. 

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon