Show SfToolBar or SfButton just before the toggle button

[Harshad]

Hi,

I need to show a couple of SfButton (with e-flat style) in the header of a SfAccordion.  I managed those but those are displayed next to the title on the left side.  I need the title on the left side but the buttons on the right, just before the toggle button.  I went through similar threads but can't find how to achieve this.  (Though, the other threads taught me how to separate button click from the header click, very useful!)

Is there any way to achieve what I am trying to do?

Thanks

Harshad

[Vijay Ravi]

Hi Harshad,

 

We have reviewed and validated your reported query. We recommend utilizing the Blazor Accordion Header Template to customize and add the necessary buttons to the header as per your requirements. Please refer to the provided sample code for your reference.

Sample link: https://blazorplayground.syncfusion.com/rZBojkDfVWjVyYiv

UG: https://blazor.syncfusion.com/documentation/accordion/how-to/prevent-expand-collapse-accordion-item

[index.razor]
 

 

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Navigations

<div class="component-container">

    <SfAccordion>

        <AccordionItems>

            <AccordionItem>

                <HeaderTemplate>

                    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">

                        <div>Margaret Peacock</div>

                        <div class="header-buttons">

                            <div @onclick:stopPropagation="true">

                                <SfButton CssClass="e-flat" OnClick="@(() => OnButtonClick("Margaret"))">Edit</SfButton>

                            </div>

                            <div @onclick:stopPropagation="true">

                                <SfButton CssClass="e-flat" OnClick="@(() => OnButtonClick("Margaret"))">Delete</SfButton>

                            </div>

                        </div>

                    </div>

                </HeaderTemplate>

                <ContentTemplate>

                    <div>Margaret Peacock was born on Saturday, 01 December 1990. Now lives at Coventry House Miner Rd., London, UK. Margaret Peacock holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday, 01 May 2010</div>

                </ContentTemplate>

            </AccordionItem>

            <AccordionItem>

                <HeaderTemplate>

                    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">

                        <div>Laura Callahan</div>

                        <div class="header-buttons">

                            <div @onclick:stopPropagation="true">

                                <SfButton CssClass="e-flat" OnClick="@(() => OnButtonClick("Laura"))">Edit</SfButton>

                            </div>

                            <div @onclick:stopPropagation="true">

                                <SfButton CssClass="e-flat" OnClick="@(() => OnButtonClick("Laura"))">Delete</SfButton>

                            </div>

                        </div>

                    </div>

                </HeaderTemplate>

                <ContentTemplate>

                    <div>Laura Callahan was born on Tuesday, 06 November 1990. Now lives at Edgeham Hollow Winchester Way, London, UK. Laura Callahan holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday, 01 May 2010</div>

                </ContentTemplate>

            </AccordionItem>

            <AccordionItem>

                <HeaderTemplate>

                    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">

                        <div>Albert Dodsworth</div>

                        <div class="header-buttons">

                            <div @onclick:stopPropagation="true">

                                <SfButton CssClass="e-flat" OnClick="@(() => OnButtonClick("Albert"))">Edit</SfButton>

                            </div>

                            <div @onclick:stopPropagation="true">

                                <SfButton CssClass="e-flat" OnClick="@(() => OnButtonClick("Albert"))">Delete</SfButton>

                            </div>

                        </div>

                    </div>

                </HeaderTemplate>

                <ContentTemplate>

                    <div>Albert Dodsworth was born on Thursday, 19 October 1989. Now lives at 4726 - 11th Ave. N.E., Seattle, USA. Albert Dodsworth holds a position of Sales Representative in our WA department, (Seattle USA). Joined our company on Friday, 01 May 2009</div>

                </ContentTemplate>

            </AccordionItem>

        </AccordionItems>

    </SfAccordion>

</div>

<style>

    .header-buttons {

        display: flex;

        gap: 10px;

        margin-right: 10px; /* Ensure some space before the toggle button */

    }

    .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {

        width: 100%;

    }

</style>

@code {

    private void OnButtonClick(string name)

    {

        // This will now execute without toggling the accordion item.

        Console.WriteLine($"{name}'s button clicked!");

    }

}

Don't hesitate to get in touch if you require further help or more information.
 

Regards,

Vijay

[Harshad]

Hi Vijay,

Perfect!  Thank you so much!

Regards

Harshad

[Vijay Ravi]

Hi Harshad,

Thank you for the update. We're glad to hear that the provided solution meets your requirements. Reach out to us if you need any further assistance. We are here to help you.

Regards

vijay