How to dynamically update option items in DropDownButton?

[Jessica DeBlois]

Hi,

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?

Thanks!

[Silambarasan I]

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, 

 

index.html 

<input type="button" value="Switch Data" id="switchdata"/> 

<button id="ddbtn">Button</button> 

 

index.ts 

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); 

btnObj.appendTo('#ddbtn'); 

 

document.getElementById('switchdata').onclick = () => { 

    updateData = !updateData; 

} 

 

Sample Link: https://stackblitz.com/edit/87o6uh-gdt4ew?file=index.html 

 

Could you please check the above sample and get back to us if you need any further assistance? 

 

Regards, 

Silambarasan