Events

This article showcases the available events in the Telerik CheckBox component:

• ValueChanged
• OnChange
• IndeterminateChanged

ValueChanged

The ValueChanged event fires every time the Value parameter changes.

Handle ValueChanged

@*This example showcases one-way data binding by using Value and ValueChanged*@

<h4 class="text-muted">Deliveries:</h4>

@foreach (var delivery in Deliveries)
{
    <div>
        <label class="text-muted">
            <TelerikCheckBox Value="@delivery.IsDelivered"
                             ValueChanged="@((bool value) => ChangeHandler(value, delivery.ProductName))" />
            @delivery.ProductName
        </label>
    </div>
}

@if (AlreadyDelivered.Any())
{
<div>
    <h6 class="text-info">Successfully delivered products:</h6>
    <ul>
        @{
            foreach (var item in AlreadyDelivered)
            {
                <li>
                    @item.ProductName
                </li>
            }
        }
    </ul>
</div>   
}

@code {
    public List<Delivery> Deliveries { get; set; }
    public List<Delivery> AlreadyDelivered
    {
        get
        {
            return Deliveries.Where(x => x.IsDelivered == true).ToList();
        }
    }

    void ChangeHandler(bool value, string productName)
    {
        var item = Deliveries.Where(x => x.ProductName == productName).First();
        // update the model value because the framework does not allow two-way binding when the event is used
        item.IsDelivered = value;
    }

    //In real case scenarios the model will be in a separate file.
    public class Delivery
    {
        public string ProductName { get; set; }
        public bool IsDelivered { get; set; }
    }

    //Generating dummy data
    protected override void OnInitialized()
    {
        //Make your real data generation here.
        Deliveries = new List<Delivery>();
        Deliveries.Add(new Delivery()
        {
            ProductName = "PC",
            IsDelivered = false
        });
        Deliveries.Add(new Delivery()
        {
            ProductName = "Mobile Phone",
            IsDelivered = false
        });
        Deliveries.Add(new Delivery()
        {
            ProductName = "Headset",
            IsDelivered = false
        });
        Deliveries.Add(new Delivery()
        {
            ProductName = "Monitor",
            IsDelivered = false
        });
    }
}

The result from the code snippet above

The event is an EventCallback and it can be synchronous (return void), or it can also be asynchronous and return async Task.

The lambda expression in the handler is required by the framework: https://github.com/aspnet/AspNetCore/issues/12226.

OnChange

The OnChange event fires every time the Value parameter changes. The key difference with ValueChanged is that OnChange does not prevent two-way data binding (using the @bind-Value syntax).

Handle OnChange

@*This example showcases the usage of OnChange event in conjunction with two-way data binding*@

<TelerikCheckBox Id="myCheckBox"
                 @bind-Value="@isSelected"
                 OnChange="@ChangeHandler">
</TelerikCheckBox>
<label for="myCheckBox">@(isSelected ? "Selected" : "Not selected")</label>

<div class="text-info">
    @Result
</div>


@code {
    private bool isSelected { get; set; }
    private string Result { get; set; } = String.Empty;

    void ChangeHandler(object value)
    {
        Result = $"OnChange event fired with: {value}";
    }
}

The result from the code snippet above

IndeterminateChanged

The IndeterminateChanged event fires every time the Indeterminate parameter changes. The component does this when the checkbox was indeterminate and the user clicks it to toggle it to a checked/unchecked state. If you toggle the parameter value yourself, the event will not be raised.

Handle IndeterminateChanged event

@* Click the checkbox when it is indeterminate to toggle its state to see when the event fires. *@

<div class="m-3">
    Checkbox is checked: @CheckBoxValue
    <br />
    @result
</div>
<div class="mt-2">
    <label for="theCb" class="text-muted">Indeterminate checkbox</label>
    <TelerikCheckBox @bind-Value="@CheckBoxValue" Id="theCb"
                     Indeterminate="@Indeterminate"
                     IndeterminateChanged="((bool val) => ChangeHandler(val))">
    </TelerikCheckBox>
</div>
<TelerikButton Primary="true" OnClick="@(() => Indeterminate = !Indeterminate)"> Toggle Indeterminate </TelerikButton>

@code{
    bool Indeterminate { get; set; } = true;
    bool CheckBoxValue { get; set; }

    string result { get; set; }

    void ChangeHandler(bool value)
    {
        // make sure to set the model value, two-way binding does not update it automatically
        Indeterminate = value;

        result = $"Indeterminate state changed to {value} on <strong>{DateTime.Now}</strong>";
    }
}