Custom Events in Telerik Form component

index.razor

@page "/"
@using System.ComponentModel.DataAnnotations
@inject NavigationManager NavigationManager

<div class="demo-section auto">
    @if (ValidSubmit)
    {
        <div class="demo-alert demo-alert-success" role="alert">
            The form was submitted successfully.
        </div>
    }
    else
    {
        <TelerikForm EditContext="@TestEditContext"
                     @ref="@FormRef"
                     Width="400px"
                     OnValidSubmit="@HandleValidSubmit"
                     OnInvalidSubmit="@HandleInvalidSubmit">
            <FormValidation>
                <DataAnnotationsValidator></DataAnnotationsValidator>
            </FormValidation>
            <FormItems>
                <FormItem LabelText="First Name" Field="@(nameof(Application.FirstName))"  />
                <FormItem LabelText="Last Name" Field="@(nameof(Application.LastName))" />
                <FormItem LabelText="Position you are applying for:" Field="@(nameof(Application.Position))" />
                <FormItem Field="@(nameof(Application.Hours))">
                    <Template>
                        <p>customEventTriggered count: @customEventTriggered</p>
                        @* custom logic can also be handled through the view model *@
                        <p>@TestApplication.HourMessage</p>
                        <label for="hours" class="k-label k-form-label">Preferred work hours*:</label>
                        <TelerikRadioGroup Layout="RadioGroupLayout.Horizontal"
                                           Id="hours"
                                           Value="@TestApplication.Hours"
                                           ValueExpression="@(()=> TestApplication.Hours)"
                                           ValueChanged="@( (int? v) => HandleHoursChanged(v) )"
                                           Data="@HourRanges">
                        </TelerikRadioGroup>
                        <TelerikValidationMessage For="@(() => TestApplication.Hours)"></TelerikValidationMessage>
                    </Template>
                </FormItem>
                <FormItem Field="@(nameof(Application.StartDate))" Hint="Hint: Sooner date is considered a privilage." />
                <FormItem Field="@(nameof(Application.LettersConfirmation))">
                    <Template>
                        <label for="mails" class="k-label k-form-label">Send me any job opportunities:</label>
                        <TelerikSwitch @bind-Value="@TestApplication.LettersConfirmation" OffLabel="No" OnLabel="Yes"></TelerikSwitch>
                        <TelerikValidationMessage For="@(() => TestApplication.LettersConfirmation)"></TelerikValidationMessage>
                    </Template>
                </FormItem>
            </FormItems>
            <FormButtons>
                <TelerikButton ButtonType="ButtonType.Submit" Primary="true">Apply</TelerikButton>
                <TelerikButton ButtonType="ButtonType.Button" OnClick="@OnClear">Reset</TelerikButton>
            </FormButtons>
        </TelerikForm>
    }
</div>
@code {

    int customEventTriggered;
    void HandleHoursChanged(int? hour)
    {
        // do something custom here
        customEventTriggered += 1;

        // Set data value, now that this is custom we're responsible for data binding
        TestApplication.Hours = hour;
    }

    public TelerikForm FormRef { get; set; }

    public EditContext TestEditContext { get; set; }
    public bool ValidSubmit { get; set; } = false;

    public Application TestApplication { get; set; } = new Application();

    public List<HourModel> HourRanges { get; set; } = new List<HourModel>()
{
        new HourModel() { Value = 1, Text = "20 - 30" },
        new HourModel() { Value = 2, Text = "30 - 40" },
        new HourModel() { Value = 3, Text = "40+" },
    };

    protected override void OnInitialized()
    {
        TestEditContext = new EditContext(TestApplication);
        base.OnInitialized();
    }

    private void OnClear()
    {
        TestApplication = new Application();

        TestEditContext = new EditContext(TestApplication);
        TestEditContext.AddDataAnnotationsValidation();
    }

    async void HandleValidSubmit()
    {
        ValidSubmit = true;

        await Task.Delay(2000);

        ValidSubmit = false;

        StateHasChanged();
    }

    void HandleInvalidSubmit()
    {
        ValidSubmit = false;
    }

    public class Application
    {
        [Required]
        public string FirstName { get; set; }

        [Required]
        public string LastName { get; set; }

        [Required]
        public int? Hours { get; set; }

        [Required]
        public DateTime? StartDate { get; set; }

        [Required]
        public Position? Position { get; set; }

        public bool LettersConfirmation { get; set; }

        public string HourMessage => !Hours.HasValue ? "Not set" : Hours == 1 ? "Part Time" : Hours == 2 ? "Full Time" : "Over Time";
    }

    public enum Position
    {
        Sales,
        Accounting,
        Marketing,
        Engineering
    }

    public class HourModel
    {
        public int Value { get; set; }

        public string Text { get; set; }
    }
}