Disable specific item in dropdownlistcomponent

Question

Is there any way to disable specific items in dropdownlistcomponent?

Sevvandhi Nagulan · Answer

Hi Kenneth, 


Greetings from Syncfusion support. 


You can disable a specific item using the itemCreated event by adding an e-disabled class to the item as the code example you mentioned. 





export class Data extends SampleBase { 
    constructor() { 
        super(...arguments); 
        this.temp = 'sportsData'; 
        // define the JSON of data 
        this.sportsData = data[this.temp]; 
        // maps the local data column to fields property 
        this.localFields = {  text: 'Game', value: 'Id', itemCreated: (e) => { 
                if (this.disableItems.indexOf(e.curData.Id) > -1) {  
                e.item.classList.add('e-disabled'); 
                e.item.classList.add('e-overlay'); 
            }  
        }  
        }; 
        this.disableItems = ['Game1']; 
    } 



Sample Link: https://stackblitz.com/edit/react-tyoy34-nxqzma?file=index.css 


Regards, 
Sevvandhi N

Kenneth Tan · Answer

I tried using the itemCreated  as suggested, but noticed that it only triggers when you first open the dropdown. Is there a different way to make it so I can disable different fields everytime the user opens the dropdown?

Sevvandhi Nagulan · Answer

Hi Kenneth, 


You can use the open event to disable the element on your own. Please refer to the code below, 





this.onOpen = function(e){ 
          e.popup.element.querySelectorAll('.e-list-item')[0].classList.add('e-disabled'); 
          e.popup.element.querySelectorAll('.e-list-item')[0].classList.add('e-overlay'); 
        } 


In the above code, we get the popup list in the open event args using the e-list-item class, and the first item is disabled. 

Sample Link: https://stackblitz.com/edit/react-tyoy34-yfawms?file=index.js 


Regards, 
Sevvandhi N