Class
TelerikColorPicker

A component that lets you choose a color using a popup with Gradient and Palette views. Supports value preview/template, icons, open/close events, adaptive rendering (popup/action sheet), theming (fill/rounded/size), and two-way value binding.

Definition

Namespace:Telerik.Blazor.Components

Assembly:Telerik.Blazor.dll

Syntax:

cs-api-definition
public class TelerikColorPicker : ColorEditorBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Inheritance: objectComponentBaseBaseComponentTelerikInputBase<string>ColorEditorBaseTelerikColorPicker

Implements: IComponentIDisposableIHandleAfterRenderIHandleEvent

Inherited Members ColorEditorBase.OnParametersSetAsync()ColorEditorBase.ShowClearButtonColorEditorBase.ShowPreviewColorEditorBase.ShowButtonsColorEditorBase.ValueFormatColorEditorBase.ViewColorEditorBase.ViewChangedColorEditorBase.OnBlurColorEditorBase.SizeTelerikInputBase<string>.SetParametersAsync(ParameterView)TelerikInputBase<string>.Dispose()TelerikInputBase<string>.FocusAsync()TelerikInputBase<string>.CascadedEditContextTelerikInputBase<string>.FloatingLabelTelerikInputBase<string>.IdTelerikInputBase<string>.EnabledTelerikInputBase<string>.TabIndexTelerikInputBase<string>.ValueExpressionTelerikInputBase<string>.ValueChangedTelerikInputBase<string>.ValueTelerikInputBase<string>.OnChangeTelerikInputBase<string>.AriaLabelTelerikInputBase<string>.AriaLabelledByTelerikInputBase<string>.AriaDescribedByTelerikInputBase<string>.ValidateOnTelerikInputBase<string>.InputModeBaseComponent.ShouldRender()BaseComponent.InitLocalizer()BaseComponent.ThrowIfParameterIsNull(object, string)BaseComponent.HaveOptionsChanged(IDictionary<string, object>, IDictionary<string, object>)BaseComponent.GetClassString(params string[])BaseComponent.InvokeAsync<T>(string, params object[])BaseComponent.InvokeAsync<T>(string, CancellationToken, params object[])BaseComponent.InvokeVoidAsync(string, params object[])BaseComponent.InvokeVoidAsyncWithoutAwait(string, params object[])BaseComponent.InvokeComponentMethodAsync<T>(string, params object[])BaseComponent.InvokeComponentMethodAsync<T>(string, CancellationToken, params object[])BaseComponent.InvokeVoidComponentMethodAsync(string, params object[])BaseComponent.InvokeComponentVoidMethodAsync(string, object)BaseComponent.InvokeDisposeAsync()BaseComponent.StateHasChanged()BaseComponent.RootComponentBaseComponent.ClassComponentBase.OnInitialized()ComponentBase.OnParametersSet()ComponentBase.OnAfterRender(bool)ComponentBase.InvokeAsync(Action)ComponentBase.InvokeAsync(Func<Task>)ComponentBase.DispatchExceptionAsync(Exception)

Constructors

TelerikColorPicker()

Declaration

cs-api-definition
public TelerikColorPicker()

Properties

AdaptiveMode

Defines if the component will adapt and automatically change its rendering based on the current screen size. Default value is None.

Declaration

cs-api-definition
[Parameter]
public AdaptiveMode AdaptiveMode { get; set; }

Property Value

AdaptiveMode

ColorPickerSettings

Provides configuration for WebMCP tools, such as a Name to distinguish this ColorPicker from others on the same page.

Declaration

cs-api-definition
[Parameter]
public RenderFragment ColorPickerSettings { get; set; }

Property Value

RenderFragment

ColorPickerViews

The ColorPicker popup can display different views. They allow users to select a color from an interface that matches their preferences. The supported views are: Telerik.Blazor.Components.ColorGradient and Telerik.Blazor.Components.ColorPalette. By default, both views are enabled and the gradient view is displayed first. Children: Telerik.Blazor.Components.ColorGradient, Telerik.Blazor.Components.ColorPalette.

Declaration

cs-api-definition
[Parameter]
public RenderFragment ColorPickerViews { get; set; }

Property Value

RenderFragment

DataSmartPasteDescriptionAttribute

Gets or sets the description used for the data-smart-paste attribute.

Declaration

cs-api-definition
[Parameter]
public string DataSmartPasteDescriptionAttribute { get; set; }

Property Value

string

EnableWebMcpTools

Enables WebMCP tool registration for this ColorPicker. When true, ColorPicker operations are exposed as tools discoverable by AI models through the browser. Default value is false.

Declaration

cs-api-definition
[Parameter]
public bool EnableWebMcpTools { get; set; }

Property Value

bool

FillMode

Specifies the fill mode of the ColorPicker.

Declaration

cs-api-definition
[Parameter]
public string FillMode { get; set; }

Property Value

string

Icon

Specifies the icon rendered in the picker value. You can use either a predefined Telerik Icon or a custom one. Refer to Icons - Documentation for more information on how icons work.

Declaration

cs-api-definition
[Parameter]
public object Icon { get; set; }

Property Value

object

OnClose

Defines the OnClose Event which is fired before the popup of the ColorPicker is closed.

Declaration

cs-api-definition
[Parameter]
public EventCallback<ColorPickerCloseEventArgs> OnClose { get; set; }

Property Value

EventCallback<ColorPickerCloseEventArgs>

OnOpen

Defines the OnOpen Event which is fired before the popup of the ColorPicker is opened.

Declaration

cs-api-definition
[Parameter]
public EventCallback<ColorPickerOpenEventArgs> OnOpen { get; set; }

Property Value

EventCallback<ColorPickerOpenEventArgs>

PopupClass

Specifies a popup class to be rendered on the popup.

Declaration

cs-api-definition
[Parameter]
public string PopupClass { get; set; }

Property Value

string

Rounded

Specifies the roundness of the ColorPicker.

Declaration

cs-api-definition
[Parameter]
public string Rounded { get; set; }

Property Value

string

Title

Specifies a title attribute to be rendered on the chooser button.

Declaration

cs-api-definition
[Parameter]
public string Title { get; set; }

Property Value

string

ValueTemplate

Defines the RenderFragment to be displayed in the chooser button instead of the default colored square. Children: allows arbitrary content.

Declaration

cs-api-definition
[Parameter]
public RenderFragment ValueTemplate { get; set; }

Property Value

RenderFragment

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

cs-api-definition
protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder

RenderTreeBuilder

Overrides ComponentBase.BuildRenderTree(RenderTreeBuilder)

Close()

Closes the popup of the component.

Declaration

cs-api-definition
public void Close()

OnAfterRenderAsync(bool)

Declaration

cs-api-definition
protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender

bool

Returns

Task

Overrides BaseComponent.OnAfterRenderAsync(bool)

OnInitializedAsync()

Declaration

cs-api-definition
protected override Task OnInitializedAsync()

Returns

Task

Overrides TelerikInputBase<string>.OnInitializedAsync()

Open()

Opens the popup of the component.

Declaration

cs-api-definition
public void Open()