Add Events (OnBlur, OnChange, ...) programmatically in Custom Component

[Lazar Gosic]

Hello

I am new to Syncfusion in combination with Blazor and trying new things, currently at a problem I cannot seem to solve.

My Goal: I want to create a custom component based on "Numeric Textbox" and add a OnBlur event. This works fine:

                                                                    <CasePercentTextBox @bind-Value="@myField.MyValue"
                                                                                        ValueFormatter="@ValueFormatter"
                                                                                        Attributes="@myField.Attributes"
                                                                                        OnBlur="args => { myField.MyValue = myField.MyValue / 100; }"
                                                                                        CssClass="@(myField.HasValue ? "valid" : "mandatory")">
                                                                    </CasePercentTextBox>

But I don't want to specify my OnBlur method every time, I want it to be a part of my custom component.

So I removed the OnBlur Attribute and extended my code behind like this:

        protected override Task OnInitializedAsync()
        {
            OnBlur += () =>
            {
                Value = Value / 100;
            };

            return base.OnInitializedAsync();
        }

But I cannot add a function (in this case lamba expression) to the OnBlur EventHandler.

Might seem like a rather stupid question but I'm still stuck at this and would appreciate any kind of support.

Thanks

[Sevvandhi Nagulan]

Hi Lazar , 

 

 

Greetings from Syncfusion support. 

We would like to inform you that, we cannot add the events programmatically to the code. Since, based on the specific action, the events are triggered. So, as stated in the code snippet that you given, we suggest using the Lambda expression. 

Regards, 

Sevvandhi N 

[Lazar Gosic]

What would be the approach if I want to create my own Component based on a SyncFusion component AND have my JavaScript snippet included...

What I'm basically trying to do is modify the original HTML template by including my lamba function... any pointers you could give me?

[Sevvandhi Nagulan]

Hi Lazar, 

Thanks for the update. 

We checked the reported requirement. Please find the code example for using Lambda expressions. 

 

 

[Child component] 

 

<CasePercentTextBox OnBlur="@(e => Blur(e))"></CasePercentTextBox> 

 

 

@code { 

    public void Blur(NumericBlurEventArgs<int> e) 

    { 

 

    } 

} 

 

[Parent component] 

<SfNumericTextBox TValue="int" @bind-Value="@MyValue"> 

    <NumericTextBoxEvents TValue="int" Blur="OnBlur"></NumericTextBoxEvents> 

 

</SfNumericTextBox> 

 

@code{ 

 

    [Parameter] 

    public int MyValue { get; set; } = 100; 

 

    [Parameter] 

    public EventCallback<NumericBlurEventArgs<int>> OnBlur { get; set; } 

} 

Please find the sample below, 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomComponent-1576894676 

MSDN link: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-3.1 

Please check the above suggestion and get back to us if you need further assistance. 

Regards, 

Sevvandhi N