Palettes
The ColorPicker supports color palettes that are displayed in the Palette view.
The default palette consists of 20 basic colors. You can specify the desired collection of colors through the Palette() option.
The example below demonstrates how to define a color palette that will be displayed in the Palette view.
@(Html.Kendo().ColorPicker()
.Name("colorPicker")
.Palette(new string[] { "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" })
)
@addTagHelper *, Kendo.Mvc
@{
string[] colors = new string[] { "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" };
}
<kendo-colorpicker name="colorPicker" palette-colors="colors">
</kendo-colorpicker>
Defining Web-Safe Colors
The ColorPicker provides a color palette of Web-safe colors. Use the ColorPickerPalette.WebSafe enum to define it.
@(Html.Kendo().ColorPicker()
.Name("colorPicker")
.Palette(ColorPickerPalette.WebSafe)
)
@addTagHelper *, Kendo.Mvc
<kendo-colorpicker name="colorPicker" palette="ColorPickerPalette.WebSafe">
</kendo-colorpicker>
Specifying the Number of Columns
To specify the number of columns of the palette, set up the Columns() option. The number of columns is automatically configured when using the default or the WebSafe palettes.
@(Html.Kendo().ColorPicker()
.Name("colorPicker")
.Columns(3)
.Palette(new string[] { "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" })
)
@addTagHelper *, Kendo.Mvc
@{
string[] colors = new string[] { "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" };
}
<kendo-colorpicker name="colorPicker" palette-colors="colors" columns="3">
</kendo-colorpicker>