Custom component event handling

[cho gyeong ho]

hello. When developing with blazor, we are customizing components such as buttons and DropDownList to be commonly used.

The design, parameters, etc. are organized and operating normally, but I am curious about how to define the event.

The source is as follows.

(custom component ->  User_ButtonGroup.razor)

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Light" Mode="AppBarMode.Dense">

    <AppBarSpacer></AppBarSpacer>

    <SfButton id="btn_Retrieve" IsPrimary="true" CssClass="e-primary">Retrieve</SfButton>

    <SfButton IsPrimary="true" CssClass="e-primary">Save</SfButton>

    <SfButton IsPrimary="true" CssClass="e-primary">Delete</SfButton>

</SfAppBar>

@code {

}

(Part of the page that uses custom components)

 <TabItem>

     <HeaderTemplate>등록테스트</HeaderTemplate>

     <ContentTemplate>

         @* 버튼영역 무조건 복사*@

         <div class="content-wrapper" style="width: 100%;height:30px;">

             <User_ButtonGroup />

         </div>

[YuvanShankar Arunagiri]

Hi Cho,

We have checked your reported query and prepared the sample based on your requirement. Adding the new parameter event for respect component in child component and use that parameter in parent component like shown as below.

[child-component]:

 

<SfAppBar ColorMode="AppBarColor.Light" Mode="AppBarMode.Dense">

    <AppBarSpacer></AppBarSpacer>

    <SfButton id="btn_Retrieve" IsPrimary="true" CssClass="e-primary">Retrieve</SfButton>

    <SfButton IsPrimary="true" CssClass="e-primary" OnClick="click1">Save</SfButton>

    <SfButton IsPrimary="true" CssClass="e-primary" OnClick="click2">Delete</SfButton>

</SfAppBar>

 

@code {

    [Parameter]

    public EventCallback<object> SaveClick { get; set; }

 

    [Parameter]

    public EventCallback<object> DeleteClick { get; set; }

 

    private async Task click1()

    {

        await SaveClick.InvokeAsync();

    }

 

    private async Task click2()

    {

        await DeleteClick.InvokeAsync();

    }

}

[Parent-component]:

<div class="content-wrapper" style="width: 100%;height:30px;">

    <Counter SaveClick="@SaveClick" DeleteClick="@DeleteClick" />

</div>

 

@code{

    private void SaveClick()

    {

 

    }

    private void DeleteClick()

    {

 

    }

}

Kindly refer to the attached sample and get back to us if you need any assistance.

Regards,

YuvanShankar A

Attachment: ContextMenuSample_24571b9d.zip

[cho gyeong ho]

thanks. I'll test it.

[Keerthikaran Venkatachalam]

You're welcome, Cho. Get back to us if you need any other assistance.

NOTE: If that post is helpful, please mark it as an answer so that other members can locate it more quickly.