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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Disabling of item

Thread ID:

Created:

Updated:

Platform:

Replies:

141651 Dec 24,2018 05:23 PM UTC May 13,2019 10:25 AM UTC Angular - EJ 2 8
loading
Tags: MultiSelectDropdown
Thierry Lunati
Asked On December 24, 2018 05:23 PM UTC

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 [Syncfusion]
Replied On December 26, 2018 01:44 PM UTC

  
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. 


Keerthana Rajendran [Syncfusion]
Replied On December 26, 2018 01:56 PM UTC

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. 


Thierry Lunati
Replied On January 4, 2019 10:31 AM UTC

Thanks a lot for solution!

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

Prince Oliver [Syncfusion]
Replied On January 7, 2019 09:39 AM UTC

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
Replied On March 8, 2019 05:19 AM UTC

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 [Syncfusion]
Replied On March 8, 2019 09:58 AM UTC

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 


Ranjith
Replied On May 10, 2019 11:36 AM UTC

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 [Syncfusion]
Replied On May 13, 2019 10:25 AM UTC

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. 


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

;