Telerik Forums
Kendo UI for jQuery Forum
1 answer
20 views

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.

Neli
Telerik team
 answered on 17 Jan 2024
1 answer
134 views
The editor I am replacing with the Kendo MVC editorFor had a text area I could paste a hex color into. There are other colorpickers in Kendo that can do this, like this one. Am I able to somehow use this with the editorFor ForeColor an BackColor? Ideally in the cshtml, or in the jquery if there is a path for that to work.
Ivan Danchev
Telerik team
 answered on 28 Mar 2023
0 answers
87 views

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.

ashutosh
Top achievements
Rank 1
Iron
Veteran
 asked on 27 Sep 2021
7 answers
190 views
Is there a way to change the default format from HEX to RGB? I know that if you use the opacity you get the display value as RGBA but we need not to support opacity but the display format should be RGB.
Aleksandar
Telerik team
 answered on 02 Feb 2021
1 answer
42 views

Hi,

Is there a way to capture the mouseover event on the palette?

 

Matt

Peter Milchev
Telerik team
 answered on 02 Sep 2019
7 answers
481 views

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

Ivan Danchev
Telerik team
 answered on 18 Jun 2019
3 answers
606 views

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?

Ianko
Telerik team
 answered on 11 Jul 2017
3 answers
268 views

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.}
Ianko
Telerik team
 answered on 24 Jan 2017
2 answers
41 views

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

Tayger
Top achievements
Rank 1
Iron
 answered on 30 Nov 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?