Edit this page

ColorPicker Tag Helper Overview

The ColorPicker tag helper helps you configure the Kendo UI ColorPicker widget in ASP.NET Core applications.

Basic Usage

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

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

Configuration

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

Example

        @(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>).

Example

        @(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