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

Disabling of item

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.

8 Replies

KR Keerthana Rajendran Syncfusion Team December 26, 2018 08:44 AM

  
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 



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 


Regards, 
Keerthana. 



KR Keerthana Rajendran Syncfusion Team December 26, 2018 08:56 AM

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 



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 


Regards, 
Keerthana. 



TL Thierry Lunati January 4, 2019 05:31 AM

Thanks a lot for solution!

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


PO Prince Oliver Syncfusion Team January 7, 2019 04:39 AM

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 



GO Goutham March 8, 2019 12:19 AM

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.


PO Prince Oliver Syncfusion Team March 8, 2019 04:58 AM

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. 

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

Regards, 
Prince 



RA Ranjith May 10, 2019 07:36 AM

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


AB Ashokkumar Balasubramanian Syncfusion Team May 13, 2019 06:25 AM

Hi Goutham, 
 
Our DropDownList component open event is triggered when the popup element is opened. Please check the API Link. 
 
 
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.  
 
 
Regards, 
Ashokkumar B. 


Loader.
Live Chat Icon For mobile
Up arrow icon