AccordionItem "OnCLick" Event

[David]

Hello,

I need to execute an event when the user clicks on an accordion item.

I don't see any "onchange" or "onclick" event handlers in the AccordionItem Component.

Is there something I missed?

Thanks.

[Balasubramanian Sattanathan]

Hi David, 

Greetings from Syncfusion Support. 

We have validated your requirement at our side and prepared a sample based on that by making use of the below code snippets. And it can be downloaded from the below link. 

<SfAccordion> 

    <AccordionItems> 

        <AccordionEvents Clicked="OnclickHandler"> </AccordionEvents> 

        <AccordionItem Expanded="true" Header="ASP.NET" Content="Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface."></AccordionItem> 

        <AccordionItem Header="ASP.NET MVC" Content="The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication."></AccordionItem> 

        <AccordionItem Header="JavaScript" Content="JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications."></AccordionItem> 

    </AccordionItems> 

</SfAccordion> 

@code{ 

    public void OnclickHandler(AccordionClickArgs args) 

    { 

        // Here you can customize your code 

        Console.WriteLine("Clicked"); 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/156504/ze/Blazor_sample_accordion-300001446.zip 

 

Kindly try the above sample and let us know if you need further assistance.   

Regards, 

Balasubramanian S 

[Jay Goodison]

This is useful for our application.

Could you also please document how to get which Accordion Item has been clicked?

When I look at the args, apart from using Screen X & Y to work out what has been clicked there doesn't seem to be a way of distinguishing

Thanks in advance

[Balasubramanian Sattanathan]

Hi Jay, 

Thanks for the update. 

We have validated your requirement and prepared a sample to get which accordion item has been clicked by using the below highlighted code snippet. In the sample, we can get the clicked item header and content from the args.Item and which can be downloaded from the below link.  

public void OnclickHandler(AccordionClickArgs args) 

{ 

    Console.WriteLine(args.Item.Header); 

    Console.WriteLine(args.Item.Content); 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/156504/ze/Blazor_sample(18.3.47)-1023134654.zip 

Kindly try the above links and let us know if you need further assistance. 

Regards, 

Balasubramanian S

[Attila László]

Hi!

Is there an event on After Collapse?

(Anyway what events are for accordion?)

Attila

[Satheesh Kumar Balasubramanian]

Hi Attila, 

  

Yes, we have Collapsed event. 

  

https://www.syncfusion.com/downloads/support/forum/156504/ze/Accordion1631459652 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionEvents.html#Syncfusion_Blazor_Navigations_AccordionEvents_Collapsed 

  

Index.razor: 

<SfAccordion> 

    <AccordionEvents Collapsed="AfterCollapse"></AccordionEvents> 

</SfAccordion> 

  

@code{ 

    bool IsExpanded = true; 

    private void AfterCollapse(CollapsedEventArgs args) 

    { 

        Console.WriteLine(args); 

    } 

} 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B 

[Attila László]

Hi!

Yes, that's what I was seeking.

Thank you very much.

Attila

[Balasubramanian Sattanathan]

Hi Attila,

We are happy that our solution has fulfilled your requirement. 

Kindly let us know if you have any queries. We will be happy to assist you.

Regards,
Balasubramanian S

[Scott Griswold]

Hello,

i am using HeaderTemplate and ContentTemplate with SfAccordion.  When I click on the Accordion componet and check the values of public void OnclickHandler(AccordionClickArgs args) they have not values.  

How do I determine which  Accordion AccordionItem is being clicked on when using  ContentTemplate?

Thanks

[Ruksar Moosa Sait]

Hi Scott,

We have checked on your query and suggest you set the Id property to the AccordionItems to determine which accordion AccordionItem is being clicked on when using ContentTemplate. Kindly try the attached sample and let us know if this meets your requirement.

<SfAccordion>

    <AccordionEvents Clicked="OnclickHandler"></AccordionEvents>

    <AccordionItems>

        @foreach (AccordionData Item in AccordionItems)

        {

            <AccordionItem Id="@Item.EmployeeId">

                <HeaderTemplate>

                    <div>@(Item.EmployeeName)</div>

                </HeaderTemplate>

                <ContentTemplate>

                    <div>

                        <div><b>Employee ID: </b>@Item.EmployeeId</div>

                        <div><b>Designation: </b>@Item.Designation</div>

                    </div>

                </ContentTemplate>

            </AccordionItem>

        }

    </AccordionItems>

</SfAccordion>

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItemModel.html#Syncfusion_Blazor_Navigations_AccordionItemModel_Id

Regards,

Ruksar Moosa Sait

Attachment: Blazor_AccordionItem_8921903.zip

[Lee Cunningham]

Hello,

I am having a similar issue when using the ContentTemplate,

If I use the Clicked event the expanded property of the AccoridionItemModel is always false and if I use the Expanded event all the properties of the  AccoridionItemModel are null or default.

The functionality im after is when item is expanded I can get the data to populate containing grid

        private async Task AppointmentExpanded(ExpandedEventArgs args)

        {

            switch (args.Item.Header)

            {

                case "Events":

                    {

                        _eventsSummary = GetData(args.Item.Id)

                        break;

                    }

            }

        }

Cheers

Lee

[Ashokkumar Karuppasamy]

Hi Lee Cunningham,

Based on the information provided, it seems that you're encountering an issue where the header and content render fragments are null when expanded events are triggered, as they are not included in the expanded arguments. Since the header and content values are null on our end, they are replicated as null values in the expanded args. Therefore, we suggest utilizing the accordion item Id to retrieve the data. Please try implementing this solution and let us know if you need any further assistance. The attached code snippet and sample demonstration solution are provided for your reference. Feel free to reach out for any additional support.

Sample: https://blazorplayground.syncfusion.com/LXLJNJjOyXUDvFJb

Regards,
Ashok