Questions on Kendo UI for jQuery Forum

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.

ColorPicker

Editor

answered on 28 Mar 2023

1 answer

630 views

KendoUi Font icons are not loading

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

Hierarchical Data Source

answered on 15 Jun 2022

0 answers

167 views

label association for color picker

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.

ColorPicker

asked on 27 Sep 2021

7 answers

301 views

Change display format

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.

ColorPicker

answered on 02 Feb 2021

1 answer

86 views

MouseOver

Hi,

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

Matt

ColorPicker

answered on 02 Sep 2019

7 answers

970 views

Catching the apply on the ColorPicker when a color hasn't been changed

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

ColorPicker

answered on 18 Jun 2019

3 answers

834 views

How to set kendo color picker value inside in a kendo template

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?

ColorPicker

answered on 11 Jul 2017

3 answers

366 views

ColorPicker has no method refresh().

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.}

ColorPicker

answered on 24 Jan 2017

2 answers

83 views

Colorpicker buttons do not grow

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

ColorPicker

answered on 30 Nov 2016