Accordion - Get Active/Selected Item to remove it

Question

Hi,

I need to manage a collection of Accordion Items and would like to know which item is currently active / selected (not necessarily expanded) in order to remove it from the collection? If I use Onclick

Is there a different, perhaps more elegant way to do it?

thank you in advance

Hareesh Balasubramanian · Accepted Answer

Hi Salvatore, 

Thanks for the update. 

We have validated your shared query at our end and we have modified our previously updated sample by maintaining the flag variable while click on the delete icon and remove the appropriate accordion item in Expanding event and the sample can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/159816/ze/Blazor-Accordion-Sample1223762249  





    private bool isDeleteClick = false; 
    private void OnExpanding(ExpandEventArgs args) 
    { 
        if (isDeleteClick) 
        { 
            args.Cancel = true; 
            AccordionItems.RemoveAt(args.Index); 
        } 
        isDeleteClick = false; 
    } 
    private void OnCollapsing(CollapseEventArgs args) 
    { 
        if (isDeleteClick) 
        { 
            args.Cancel = true; 
            AccordionItems.RemoveAt(args.Index); 
        } 
        isDeleteClick = false; 
    } 
    private void OnclickHandler(AccordionData Item) 
    { 
        isDeleteClick = true; 
    } 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Hareesh

Hareesh Balasubramanian · Answer

Hi Salvatore, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query using Expanding event of the Accordion component which can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/159816/ze/syncfusion-blazor-accordion-sample-495824839  





    public void onExpanding(ExpandEventArgs args) 
    { 
        args.Cancel = true; 
        Data.RemoveAt(args.Index); 
    } 

Kindly try the above solution and get back to us if you need any assistance. 

Regards, 
Hareesh

Salvatore · Answer

HiI tried your solution but didn't solve the problem.I'll explain better what I'm doing.In the header of the accordion Item I have inserted a span with an icon (delete) and when I click on it I would like the item to be deleted from the collection. The problem is that when I click on the span the Expandig event is also activated and when it renders the content it no longer finds the element and the browser is an exception.If in the OnExpanding function I set args.cancel = true, as in your example, then the item no longer expands and that's not okay either. How can I click on the span header (or other header elements) and delete the item without activating the Expanding event or other events that cause an exception?I also tried to set a private variable that would keep track of the delete action and prevent the expanding from being performed but other related exceptions happenregards