Dear support,
We are using kendo UI for jQuery editor and we have a question about editorTools "forecolor" and "backcolor" from the toolbar.
Could you please tell us if it's possible to display the 2 modes(palette and gradient) together, from our version of kendo : 2019.1.115 ?
Like for example this colorPicker : https://dojo.telerik.com/EWahuGuM
Best Regards,
Hamza.
Hi Team,
how can I connect a label to color-picker using "for" attribute? currently even though its linked, screen reader(accessibility) does not read the label for color-picker.
appreciate any help.
Hi,
Is there a way to capture the mouseover event on the palette?
Matt
Hi,
I've created a custom tool for my Kendo Editor control. It's a paragraph background color (as opposed to the back color control that only put the background around a span). I've got this more or less done however I've came across a limitation on the HSV color picker. If I pick a color such as red and hit apply this fires the change event which I can then use to set a paragraph I'm currently highlighting to however if I want to make another paragraph the same color by clicking on the colorPicker and clicking apply the change event doesn't fire. It seems I need to change the color every time in order for this event to be fired.
So I was wondering if there was anyway to catch the apply event when the color hasn't changed?
Cheers,
Tyler
Hi folks,
I am having the following column template :
<
script
id
=
"gridTemplate"
type
=
"text/x-kendo-template"
>
<
tr
data-uid
=
"#= uid #"
>
<
td
>
<
input
type
=
"color"
kendo-color-picker
=
"colorPicker"
k-palette
=
"trend.colors"
value
=
"#= color #"
on-change
=
"trend.changeColor(colorPicker.value(), this)"
/>
<
button
type
=
"button"
style
=
"background-color:black; float:right;"
class
=
"btn btn-default btn-xs white"
ng-click
=
"trend.deleteSeries('#= tag#');"
><
span
class
=
"glyphicon glyphicon-remove"
></
span
></
button
>
</
td
>
<
td
>
#= tag#
</
td
>
<
td
>
#= description#
</
td
>
<
td
>
#= unit#
</
td
>
</
tr
>
</
script
>
The problem is with setting the color of the color picker (via the value attribute) in the first column.Initially in the dataItem, the value of color was in the form of #rrggbb, but this was resulting in an error (because of the "#" symbol). I changed it in rgba() and it was working fine with 2014 kendo release. Today I update to 2015 and now it does not work. Any suggestion how to fix it?
Hello.
For the 'ColorPicker', 'ColorPalette' there is no method 'refresh()'.
Because of it, I can not change settings ('palette', 'tileSize' and etc) of these components at runtime.
Is there an alternative way to solve this problem?
My code:
01.
<
div
ng-switch-when
=
"ColorPalette"
class
=
"demo-item"
>
02.
<
div
kendo-color-palette
=
"$parent.demoColorPalette"
03.
k-options
=
"dataInputOptions"
>
04.
</
div
>
05.
</
div
>
06.
07.
....................................
08.
....................................
09.
10.
<
div
ng-switch-when
=
"ColorPalette"
>
11.
<
div
class
=
"options-section"
>
12.
<
div
class
=
"options-field"
>
13.
<
label
for
=
"paletteInput"
>Palette: </
label
>
14.
<
input
id
=
"paletteInput"
15.
kendo-drop-down-list
=
"$parent.paletteList"
16.
required
=
"required"
17.
k-options
=
"paletteOptions"
/>
18.
</
div
>
19.
20.
<
div
class
=
"options-field"
>
21.
<
label
for
=
"columnsInput"
>Columns: </
label
>
22.
<
input
id
=
"columnsInput"
23.
kendo-numeric-text-box
=
"columnsNumericBox"
24.
k-options
=
"columnsOptions"
25.
ng-model
=
"$parent.dataInputOptions.columns"
/>
26.
</
div
>
27.
28.
<
div
class
=
"options-field"
>
29.
<
label
for
=
"tileSizeInput"
>Tile size: </
label
>
30.
<
input
id
=
"tileSizeInput"
31.
kendo-numeric-text-box
=
"tileSizeNumericBox"
32.
k-options
=
"tileSizeOptions"
33.
ng-model
=
"$parent.dataInputOptions.tileSize"
/>
34.
</
div
>
35.
</
div
>
36.
</
div
>
01.
var
vm = $scope;
02.
03.
vm.initialize =
function
() {
04.
vm[`demo${vm.selection}`].setOptions(vm.dataInputOptions);
05.
06.
if
(vm.selection ==
"AutoComplete"
||
07.
vm.selection ==
"ComboBox"
||
08.
vm.selection ==
"DropDownList"
||
09.
vm.selection ==
"MultiSelect"
)
10.
{
11.
vm[`demo${vm.selection}`].setDataSource(vm.dataInputOptions.dataSource);
12.
}
13.
14.
vm[`demo${vm.selection}`].refresh();
15.
}
16.
17.
vm.columnsOptions = {
18.
min: 5,
19.
max: 20
20.
}
21.
22.
vm.tileSizeOptions = {
23.
min: 20,
24.
max: 50
25.
}
26.
27.
vm.paletteOptions = {
28.
autoBind:
false
,
29.
dataTextField:
"title"
,
30.
select:
function
(e){
31.
var
selectedItem = e.sender.dataItem(e.item);
32.
vm.dataInputOptions.palette = selectedItem.palette;
33.
},
34.
dataSource: {
35.
data: [
36.
{
37.
title:
'Office'
,
38.
palette: [
39.
"#ffffff"
,
"#000000"
,
"#eeece1"
,
"#1f497d"
40.
]
41.
},
42.
{
43.
title:
'Apex'
,
44.
palette: [
45.
"#ffffff"
,
"#000000"
,
"#c9c2d1"
,
"#69676d"
46.
]
47.
},
48.
{
49.
title:
'Austin'
,
50.
palette: [
51.
"#ffffff"
,
"#000000"
,
"#caf278"
,
"#3e3d2d"
52.
]
53.
},
54.
{
55.
title:
'Clarity'
,
56.
palette: [
57.
"#ffffff"
,
"#292934"
,
"#f3f2dc"
,
"#d2533c"
58.
]
59.
},
60.
{
61.
title:
'SlipStream'
,
62.
palette: [
63.
"#ffffff"
,
"#000000"
,
"#b4dcfa"
,
"#212745"
64.
]
65.
}
66.
67.
]
68.
}
69.
}
Hello
Not a big thing, just wanted to report it: The ok/cancel button do not grow (to a specific) size. I added the German text "Ãœbernehmen" for the ok button but it will be cut off on the right side (see attached screenshot). Maybe this is also a problem in other languages, no idea. I would expect the button would grow with its text content to a specific size (not to overlap the colorpicker window).
Regards