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,
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
Hi,
I am using the latest Kendo UI version (2016.2.714) and found a bug in the colorpicker.
The buttons (Apply and Cancel) are rendered as
<
button
class
=
"k-button k-primary apply"
>Apply</
button
>
<
button
class
=
"k-button cancel"
>Cancel</
button
>
(see kendo.colorpicker.js line 504 for details or check the source on github)
When included in a form both of the buttons always cause the form to get submitted when they get clicked as this is the common behavior of a button tag. Both of them should have the type attribute set to "button" to prevent the form from getting submitted. The rendered buttons should look like this:
<
button
type
=
"button"
class
=
"k-button k-primary apply"
>Apply</
button
>
<
button
type
=
"button"
class
=
"k-button cancel"
>Cancel</
button
>
Best regards
Thomas