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

How to dynamically update option items in DropDownButton?


I need to change the list of items in the popup of the dropdown dynamically. To do so, I tried to change the list of items during the beforeOpen and the beforeItemRender event. However, the event only fire once when the component is created. The documentation lead me to believe it should fire every time the button is clicked, right before to popup shows up.

So, I guess this is a bug, but I am also wondering if it should be working, or is there another way to achieve that with the DropDownButton?


1 Reply

SI Silambarasan I Syncfusion Team October 19, 2018 12:03 PM UTC

Hi Jessica, 
Thank you for using Syncfusion products. 
Currently, we don’t have any support to change the popup items dynamically in DropDownButton. However, we have created a workaround sample to change the popup items in DropDownButton using beforeItemRender event on button click and please find the below code example, 
<input type="button" value="Switch Data" id="switchdata"/> 
<button id="ddbtn">Button</button> 
let updateData: boolean = false; 
let items: ItemModel[] = [ 
// Initialize DropDownButton options. 
let options: DropDownButtonModel = { 
    items: items, 
    // Trigger before rendering DropDownButton item 
    beforeItemRender: (args: MenuEventArgs) => { 
        let items: string[] = updateData ? ['Add','Edit', 'Delete'] : ['Cut', 'Copy', 'Paste']; 
        if (items.indexOf(args.item.text) > -1) { 
            args.element.style.display = 'none'; 
let btnObj: DropDownButton = new DropDownButton(options); 
document.getElementById('switchdata').onclick = () => { 
    updateData = !updateData; 
Could you please check the above sample and get back to us if you need any further assistance? 

Live Chat Icon For mobile
Up arrow icon