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

(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:

 

 

Best regards

 

Thomas

I tried putting color picker inside the window but the picker is behaving strangely and is hidden. Do we have a clean css to fix this problem?

 

Hi kendo Team:
Is there any way to tell kendo color picker that the color I want to select is transparent color? I've tried to set 'transparent' or clear the input box, but it doesn't work.

Kind regards,
Oscar.

Hi there,


Just thought I would like to share my color picker for the editor, similar to the one in Microsoft Word:


And the css styles to go along with that:

I had been getting random errors when navigating through my app. After digging down into the issue if found the cause.

When elements are removed from the down the scope must be destroyed. Angular Kendo listens to the $destroy event and responds by  removing any remaining event handlers as to minimize memory leaks.

Starting at this this method:
```
// Cleanup after ourselves
scope.$on( '$destroy', 
   widget.destroy();
});
```

I only have the minified version of kendo.all.js, but the destroy method goes a little like

```
destroy: function() {
this.wrapper.off(y).find("*").off(y);
this._popup && (this._selector.destroy(), this._popup.destroy());
this._selector = this._popup = this.wrapper = null;
h.fn.destroy.call(this)
}
```


The issue for me is the wrapper property is null by the time destroy is invoked. My guess is Angular and  JQuery removes this element before kendo has the chance to do so.

I'm trying to fire an event without change happening and I'm having some trouble figuring it out.

I have the Kendo UI widget on my webpage and the default value is #000000 when the color picker loads. If I click the Apply button in the color picker the 'change' event doesn't fire because I didn't change anything. If I change the slider and click 'Apply' then the value changes and is also put into the 'input text' field.
How do I get it so the value #000000 is set when I click Apply without changing anything?

Code snippet:
<input type="text" class="text colorPicker" size="25" maxlength="100" title="${geo:loc attribute=&quot;title&quot; phrase=&quot;Please enter the hexadecimal value for the font color.&quot; /}" name="${geo:object name='CntwChooseColorScheme.PRIMHEAD_FONTCOLOR' attribute='name'/}" id="${geo:object name='CntwChooseColorScheme.PRIMHEAD_FONTCOLOR' attribute='id'/}" value="${geo:object name='DERIVED_COMPONENT.Wizard.GetValue(CntwChooseColorScheme.PRIMHEAD_FONTCOLOR)' attribute='value'/}" /> <input id="primaryheaderfontcolor" type="color" value="${geo:object name='DERIVED_COMPONENT.Wizard.GetValue(CntwChooseColorScheme.PRIMHEAD_FONTCOLOR)' attribute='value'/}" /> <script> $("#primaryheaderfontcolor").kendoColorPicker({ value: "#000000", buttons: true, change: function(e) { $('#prim_head_font_color').val(e.value); console.log("The picked color is ", e.value); console.log(e); } }); </script>

Hello,

I have recently implemented the Color Picker in my site and I'm having issues in IE 11.  The color picker opens, however, the color picker slider circle that allows me to click on any shade of color doesn't work and always stays in the upper right corner. It will not move.

I'm also not able to enter in a value and apply it, however the default value can be applied by just clicking the Apply button.

Here's a snippet of code implementing the Color Picker

<input id="primaryheadercolor" type="color" value="${geo:object name='DERIVED_COMPONENT.Wizard.GetValue(CntwChooseColorScheme.PRIMARY_HEADERCOLOR)' attribute='value'/}" />
<script>
$("#primaryheadercolor").kendoColorPicker({
buttons: true,
change: function(e) {
$('#primary_header_color').val(e.value);
console.log("The picked color is ", e.value);
console.log(e);
}
});
</script>

The following three files are included.
<link href="/geonext/js/Frameworks/KendoUI/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<script src="/geonext/js/Frameworks/KendoUI/js/jquery.min.js" type="text/javascript"></script>
<script src="/geonext/js/Frameworks/KendoUI/js/kendo.web.min.js" type="text/javascript"></script>

Screenshot is attached of what I see in IE11.

I use the Kendo UI Web v2014.1.318.
I try with Firefox and Google Chrome.

I cannot select a manual color through the input.

When I open the color picker, the focus is done to an input before the color picker.
When I click in the color input, I cannot get the focus to enter the color.



Regards,
Michaël Gauthier

There aren't a lot of graphical examples of the k-* properties for styling and there's no documentation (that I can find) for control specific styling.
Thanks.

Jeff

I'm not sure if this post would be better suited in the Grid forum or the Color Picker forum, so I apologize if I chose the wrong location.

Kendo UI Version: 2013.3.1119
I am using the ASP.NET MVC markup for the grid

I have a grid that is using batch editing which has a cell that has an editor template that is an HSV Color Picker.
When I select the cell for editing, the widget is fine in all browsers except IE 11.

In IE 11, the widget loads correctly and also opens correctly, but the issue comes when I attempt to change the color by clicking on the drag handler to move it around the canvas on the screen.  I've included images of the before and after, but basically, the drag handler loads in the correct location, but when it is clicked, it immediately 'jumps' to the far left side of the page and refuses to drag to the right unless I take the cursor way to the right of the widget.

Here is my grid code and my detail template information.  Please let me know if you need any more information.