This is a migrated thread and some comments may be shown as answers.

Customize appearance

1 Answer 18 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Veteran
Matt asked on 01 Dec 2020, 06:16 PM

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

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 04 Dec 2020, 03:56 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ColorPicker
Asked by
Matt
Top achievements
Rank 1
Veteran
Answers by
Ivan Danchev
Telerik team
Share this question
or