Disabling of item

[Thierry Lunati]

Hi! Is it possible to disable item of multi select depending on any condition? 
I've found maximumSelectionLength which disables items but it's not exactly what I'm looking for.

[Keerthana Rajendran]

  

Hi Thierry, 

Thank you for contacting Syncfusion Support. 

Query : Is it possible to disable item of multi select depending on any condition?  

Currently we don’t have any direct properties or method to disable a particular item in MultiSelect. However, you can achieve your requirement by adding css through a class for particular item through open event as shown below 

   <ejs-multiselect id='localData' #local [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark' (open)="onOpen($event)" ></ejs-multiselect> 

  onOpen(event) 

   { 

    if(! (this.mulObj as any).popupObj.element.querySelectorAll(".e-list-item")[3].classList.contains("e-hide")) 

    { 

    (this.mulObj as any).popupObj.element.querySelectorAll(".e-list-item")[3].classList.add("e-hide") 

    } 

   } 

CSS: 

<style> 

              .e-hide 

              { 

                opacity:0.7; 

                pointer-events:none; 

              } 

           </style> 

We have prepared a sample for your reference . Please refer to the below given link 

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

Query :  I've found maximumSelectionLength which disables items but it's not exactly what I'm looking for. 

Yes, maximumSelectionLength will disable the rest of items in MultiSelect when the selection limit  has been reached. Please refer to the below given UG link 

https://ej2.syncfusion.com/angular/documentation/api/multi-select#maximumselectionlength  

Regards, 

Keerthana. 

[Keerthana Rajendran]

Hi Thierry, 

Thank you for contacting Syncfusion Support. 

Query : Is it possible to disable item of multi select depending on any condition?  

Currently we don’t have any direct properties or method to disable a particular item in MultiSelect. However, you can achieve your requirement by adding css through a class for particular item through open event as shown below 

   <ejs-multiselect id='localData' #local [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark' (open)="onOpen($event)" ></ejs-multiselect> 

  onOpen(event) 

   { 

    if(! (this.mulObj as any).popupObj.element.querySelectorAll(".e-list-item")[3].classList.contains("e-hide")) 

    { 

    (this.mulObj as any).popupObj.element.querySelectorAll(".e-list-item")[3].classList.add("e-hide") 

    } 

   } 

CSS: 

<style> 

              .e-hide 

              { 

                opacity:0.7; 

                pointer-events:none; 

              } 

           </style> 

We have prepared a sample for your reference . Please refer to the below given link 

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

Query :  I've found maximumSelectionLength which disables items but it's not exactly what I'm looking for. 

Yes, maximumSelectionLength will disable the rest of items in MultiSelect when the selection limit  has been reached. Please refer to the below given UG link 

https://ej2.syncfusion.com/angular/documentation/api/multi-select#maximumselectionlength  

Regards, 

Keerthana. 

[Thierry Lunati]

Thanks a lot for solution!

Do you have any plans for implementing disabled property for option in near future?

[Prince Oliver]

Hi Thierry, 

Thank you for your update. 

Yes, we are considering this as a feature in our end and this will be included in any of our upcoming releases. 

Regards, 

Prince 

[Goutham]

Query : Is it possible to disable item of multi select depending on any condition?

     Every  thing is working fine for solution given for above query ,but with only with mouse ,if  navigate through options using key board and select the option using enter key,the option got selected which is not expected.mode is "Box" for multi select control.

[Prince Oliver]

Hi Goutham, 

Thank you for your update. 

Based on your requirement, we can use the select event to get the selected list item and check whether the selected item contains the class ‘e-hide’. Then based on that condition we can prevent the item from being selected by setting args.cancel as true. This way the item will not be selected for both keyboard and mouse interactions. Kindly refer to the following code snippet. 

onSelect(args: SelectEventArgs){ 

    if (args.item.classList.contains('e-hide')) { 

        args.cancel = true; 

    } 

} 

 

We have attached a sample for your reference, please find the sample at the following location. 

Sample Link: https://stackblitz.com/edit/angular-hvdmdc-sq8nto  

Please let us know if you need any further assistance on this. 

Regards, 

Prince 

[Ranjith]

Hi Team,

Is it possible to disable list item on the basis of  other conditions, for example

I have tried calling onOpen()  in some other function to disable item, But it didn't work please assist on this

Regards,

Ranjith KB

[Ashokkumar Balasubramanian]

Hi Goutham, 

 

Our DropDownList component open event is triggered when the popup element is opened. Please check the API Link. 

 

API Link: https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#open 

 

You can achieve the requirement only by the adding ‘e-hide’ class in open event and disable the item in select event. Select event triggers only when the item has been selected. We have considered this as feature at our end. You can track the status of this feature by using below feedback portal.  

 

https://www.syncfusion.com/feedback/4785/need-to-provide-support-for-disable-and-selected-fields-the-particular-item-in-dropdownlist 

 

Regards, 

Ashokkumar B.