ColorPicker TagHelper Overview

The Telerik UI ColorPicker TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI ColorPicker widget.

The ColorPicker provides suggestions depending on the typed text and allows multiple value entries.

Telerik UI for ASP.NET Core Ninja image

The ColorPicker is part of Telerik UI for ASP.NET Core, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the ColorPicker

The following example demonstrates how to define the ColorPicker by using the ColorPicker TagHelper.

    <kendo-colorpicker name="picker">
        <messages apply="Change" cancel="Close" />
    </kendo-colorpicker>

Basic Configuration

The ColorPicker TagHelper configuration options are passed as attributes of the tag and through nested tags (<messages>).


        @(Html.Kendo().ColorPicker()
            .Name("picker")
            .Value("#fff")
            .Messages(m => m.Apply("Change").Cancel("Close"))
            .Events(events => events.Select("preview"))
        )

        <kendo-colorpicker name="picker" value="#fff" on-select="preview">
            <messages apply="Change" cancel="Close" />
        </kendo-colorpicker>

The ColorPalette tag helper configuration options are passed as attributes of the tag and through nested tags (<tile-size>).


        @(Html.Kendo().ColorPalette()
            .Name("palette")
            .Columns(4)
            .TileSize(s => s.Width(34).Height(19))
            .Palette(new string[] {
                "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
                "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
                "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
                "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
                "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
            })
            .Events(events => events.Change("preview"))
        )

        @{
            string[] colorPickerPalette = new string[] {
                                        "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
                                        "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
                                        "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
                                        "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
                                        "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
                                    };
        }
        <kendo-colorpalette name="palette" columns="4" on-change="preview" palette-colors="colorPickerPalette">
            <tile-size height="19" width="34" />
        </kendo-colorpalette>

See Also

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