Setting Initial Color Value of ColorPicker Component

5 posts, 1 answers
  1. Alice
    Alice avatar
    6 posts
    Member since:
    Apr 2015

    Posted 26 Oct 2018 Link to this post

    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

  2. Answer
    Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 29 Oct 2018 Link to this post

    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
  3. Alice
    Alice avatar
    6 posts
    Member since:
    Apr 2015

    Posted 29 Oct 2018 in reply to Stefan Link to this post

    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

  4. Kevin
    Kevin avatar
    2 posts
    Member since:
    Oct 2018

    Posted 25 Jun 2019 Link to this post

    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

     

  5. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 26 Jun 2019 Link to this post

    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
Back to Top