Events

This article explains the events available in the Telerik Color Palette for Blazor:

• OnChange
• ValueChanged
• OnBlur

OnChange

The OnChange event represents a user action - confirmation of the current value. It fires when the user clicks, taps or presses Enter to select a color, or when the component loses focus. It does not prevent you from using two-way binding for the Value.

Handle OnChange and use two-way binding for the Value

@MyColor
<br />

<TelerikColorPalette @bind-Value="@MyColor" OnChange="@OnChangeHandler">
</TelerikColorPalette>

@code {
    string MyColor { get; set; }

    async Task OnChangeHandler(object color)
    {
        string selectedColor = (string)color;
        Console.WriteLine($"two-way binding: {MyColor}, event argument: {selectedColor}");
    }
}

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

The OnChange event is a custom event and does not interfere with bindings, so you can use it together with models and forms.

ValueChanged

The ValueChanged event fires upon every change (selection of color) in the component. Its main purpose is to provide two-way biding of the Value.

Handle ValueChanged

@MyColor
<br />

<TelerikColorPalette Value="@MyColor" ValueChanged="@ValueChangedHandler">
</TelerikColorPalette>

@code {
    string MyColor { get; set; }

    async Task ValueChangedHandler(string color)
    {
        // make sure to update the view-model. If you don't, you will effectively cancel the event
        MyColor = color;

        Console.WriteLine($"The user selected the color {MyColor}");
    }
}

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

OnBlur

The OnBlur event fires when the component loses focus.

Handle the OnBlur event

@* You do not have to use OnChange to react to loss of focus *@

@MyColor
<br />

<TelerikColorPalette @bind-Value="@MyColor" OnBlur="@OnBlurHandler">
</TelerikColorPalette>

@code {
    string MyColor { get; set; }

    async Task OnBlurHandler()
    {
        Console.WriteLine($"Lost focus. The color is {MyColor}");
    }
}

See Also

• ValueChanged and Validation
• Fire OnChange Only Once