New to Telerik UI for Blazor? Download free 30-day trial

Events

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

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 and it can be synchronous (return void), or it can also be asynchronous and return async Task.

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 and it can be synchronous (return void), or it can also be asynchronous and return async Task.

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

In this article
Not finding the help you need? Improve this article