Hi,
I'm trying to set the initial selected value of the ColorPicker component. My expectation is that it should be possible to do so with the following code:
<ColorPicker value="#ff0000" />
Since setting the "value" option when creating a ColorPicker with jQuery sets the initial selected color:
$("#picker").kendoColorPicker({ value: "#ff0000" });
However, when I set try to set the initial color using a "value" prop, it doesn't seem to work. The initial color stays black even though I try to set it to red:
https://stackblitz.com/edit/react-dmxb6f?file=app%2Fmain.js
Is there a workaround to be able to set the initial color?
Thanks,
Alice
4 Answers, 1 is accepted
Thank you for the details.
This is a known issue with the wrapper ColorPicker.
As a current workaround, we can suggest setting the value on the ComponentDidMount event:
componentDidMount() { var colorPicker = $("[data-role='colorpicker']").data("kendoColorPicker"); colorPicker.value("#ff0000")}https://stackblitz.com/edit/react-dmxb6f-bcmerj?file=app/main.js
Apologies for the caused inconvenience.
Regards,
Stefan
Progress Telerik
Rank 2
Hi Stefan,
Thanks so much for the workaround. I found that it didn't work when there were multiple colorpickers used on the page, but I was able to adapt your solution into one that did by adding the wrapping div to refs. I'll post it here in case anyone else has the same problem:
I set the ref prop of the div container to "container" and then used the following in componentDidMount():
componentDidMount() { if (this.props.value) { const colorPicker = $(this.refs.container).find("[data-role='colorpicker']").data("kendoColorPicker"); colorPicker.value(this.props.value); } }
https://stackblitz.com/edit/react-dmxb6f-1mruvn?file=app/main.js
Thanks again,
Alice
Rank 1
I realize this is an older post and I will create a new one if necessary. Is there a way to achieve the same result using pure react and no jquery? I was able to implement Alice's solution however I do not want to use jquery unless absolutely necessary.
Kevin
We are actually just working on the native ColorPicker component.
The development team is working on it, and it is planned for the next official release.
The release is for mid September, but we are releasing constantly, so the component should be available before September.
Regards,
Stefan
Progress Telerik
Rank 2
Bronze
Iron
Iron
https://www.telerik.com/forums/aspnet-core-ui
Rank 2
Bronze
Iron
Iron
I ask because it could be JavaScript related and still in the Telerik UI for ASP.NET Core ColorPicker. The KendoReact components are different they are made from the group up fully and React, this is why is it important to clarify which component is affected.