Customize appearance

[Matt]

Is there a way to customize the appearance of the color picker popup window? For example, can I add a text separator, or perhaps a tooltip to each tile in the color picker?

 

Thanks

 

Matt

[Ivan Danchev]

Hello Matt,

Text separator is not available out-of-the-box, however, you can display a Tooltip over the tiles. Here's an example showing how:

@(Html.Kendo().ColorPicker()
	.Name("picker1")
	.Palette(new string[] { "#ddd1c3", "#d2d2d2", "#746153", "#3a4c8b", "#ffcc33", "#fb455f", "#ac120f" })
	.Value("#ffcc33")
	.TileSize(30)
	.Events(ev => ev.Open("onOpen").Close("onClose"))
)

<script>
	function onOpen(e) {
		//initialize a Tooltip when the ColorPicker's dropdown opens
		$(".k-colorpalette").kendoTooltip({
			filter: "td",
			content: function (e) {
				var target = e.target; // the tile for which the tooltip is shown
				var targetColor = $(target[0]).attr("aria-label"); // the tile hex color

				// return the hex color, which will be displayed as tooltip content
				return targetColor;
			}
		});
	}

	function onClose(e) {
		var tooltip = $(".k-colorpalette").data("kendoTooltip");

		//destroy the existing Tooltip instance
		if (tooltip) {
			tooltip.destroy();
		}
	}
</script>

Regards,
Ivan Danchev
Progress Telerik