This is a migrated thread and some comments may be shown as answers.

Setting Initial Color Value of ColorPicker Component

4 Answers 593 Views
Wrappers for React
This is a migrated thread and some comments may be shown as answers.
Alice
Top achievements
Rank 2
Alice asked on 26 Oct 2018, 08:25 PM

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

Sort by
0
Accepted
Stefan
Telerik team
answered on 29 Oct 2018, 07:52 AM
Hello, Alice,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Alice
Top achievements
Rank 2
answered on 29 Oct 2018, 02:59 PM

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

0
Kevin
Top achievements
Rank 1
answered on 25 Jun 2019, 05:47 PM

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

 

0
Stefan
Telerik team
answered on 26 Jun 2019, 06:52 AM
Hello, 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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
serge
Top achievements
Rank 2
Bronze
Iron
Iron
commented on 18 May 2021, 03:06 PM | edited

I have the same problem on ASP.NET Core application. The "Value" is taken into consideration but... not displayed in the preview rectangle... v2021.3...
Stefan
Telerik team
commented on 19 May 2021, 10:33 AM

Serge, if this is for the Telerik UI for ASP.NET Core ColorPicker, I can recommend asking the question in the product forum section. This will allow the specialist for that product to take a look as the components are different:

https://www.telerik.com/forums/aspnet-core-ui
serge
Top achievements
Rank 2
Bronze
Iron
Iron
commented on 01 Jun 2021, 09:05 AM

@Stefan, the problem is not .NET, but rather JavaScript related....
Stefan
Telerik team
commented on 01 Jun 2021, 09:15 AM

Yes, but could you clarify in which product it occurs?

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.
Tags
Wrappers for React
Asked by
Alice
Top achievements
Rank 2
Answers by
Stefan
Telerik team
Alice
Top achievements
Rank 2
Kevin
Top achievements
Rank 1
Share this question
or