RadColorPicker does not show the value of selected color in Inspect

9 posts, 1 answers
  1. Caner
    Caner avatar
    5 posts
    Member since:
    Dec 2018

    Posted 19 Dec 2018 Link to this post

    Hi.

    I have a project thats contain RadColorPicker. I need to change text color according the chosen one. inspect shows me the wrong color. Process steps;

         1)Choose color and close the RadColorPicker,

         2)Inspect still shows me the previous color that i chosen,

         3)Inspect has been updated when i clicked second time to RadColorPicker.

    I don't know why is happening and need your help.

    Thanks a lot.
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5624 posts

    Posted 19 Dec 2018 Link to this post

    Hi Caner,

    Using the get_selectedColor() the picker exposes in its OnClientColorChange event will give you the new selection.

    Here's an example and below is attached a short video with the expected behavior.

    <script>
        function OnClientColorChange(sender, args) {
            var selColor = sender.get_selectedColor();
            document.getElementById("test").style.color = selColor;
        }
    </script>
    <span id="test">lorem ipsum dolor sit amet</span><br />
    <telerik:RadColorPicker runat="server" ID="rcp1" RenderMode="Lightweight" OnClientColorChange="OnClientColorChange"></telerik:RadColorPicker>


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Caner
    Caner avatar
    5 posts
    Member since:
    Dec 2018

    Posted 20 Dec 2018 in reply to Marin Bratanov Link to this post

    Hi again Marin.

    That was a really helpful answer, thank you.

    But i forgot to tell that actually i haven't use a single RadColorPicker.

    I have a lot of RadColorPickers and all of these will create on runtime.

    These identities are will generate randomly.(It is not optional. I cant change identities)

    That's why i cant get the id of selected RadColorPicker. Is this any function or argument or something that works fine?

    In this way, i can handle which picker i clicked and get its id.

    I think OnClientColorChange function will help me but, i could not get the id of selected RadColorPicker in this function.

     

    Best Regards.

    Have a good day.

  4. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    5624 posts

    Posted 20 Dec 2018 Link to this post

    Hi,

    The color picker offers the .get_element() and get_id() methods that you can use to tie it easily to the DOM.

    Here's a modification that shows one way to traverse the DOM to work with the color picker container:

    <script>
        function OnClientColorChange(sender, args) {
            var selColor = sender.get_selectedColor();
            $telerik.$(sender.get_element()).parents(".someContainer").first().find(".colorMe").css("color", selColor);
        }
    </script>
    <div class="someContainer">
        <span class="colorMe">lorem ipsum dolor sit amet</span><br />
        <telerik:RadColorPicker runat="server" ID="rcp1" RenderMode="Lightweight" OnClientColorChange="OnClientColorChange"></telerik:RadColorPicker>
    </div>
    <div class="someContainer">
        <span class="colorMe">lorem ipsum dolor sit amet</span><br />
        <telerik:RadColorPicker runat="server" ID="RadColorPicker1" RenderMode="Lightweight" OnClientColorChange="OnClientColorChange"></telerik:RadColorPicker>
    </div>
    <div class="someContainer">
        <span class="colorMe">lorem ipsum dolor sit amet</span><br />
        <telerik:RadColorPicker runat="server" ID="RadColorPicker2" RenderMode="Lightweight" OnClientColorChange="OnClientColorChange"></telerik:RadColorPicker>
    </div>
    <div class="someContainer">
        <span class="colorMe">lorem ipsum dolor sit amet</span><br />
        <telerik:RadColorPicker runat="server" ID="RadColorPicker3" RenderMode="Lightweight" OnClientColorChange="OnClientColorChange"></telerik:RadColorPicker>
    </div>


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Caner
    Caner avatar
    5 posts
    Member since:
    Dec 2018

    Posted 24 Dec 2018 in reply to Marin Bratanov Link to this post

    Hi Marin.

    I tried your solution on last weekend.

    I found which input shows me which color i choose.

    But i have still the same problem. I will show you with images.

    1- These are my columns with radcolorpickers.(create on runtime each one have their own ids)

    2- This is the inspect side that shows me selectedcolor. Input->value

    3- Changing the selected color. (Click black #000000)

    4- Still previous color i choose.

    After these steps click again the radcolorpicker. (It shows me #000000. i dont need to click second time to just change selected color)

    5- This is the code to get selected color.(For each row in loop)

    I tried to change selected color on OnClientColorChange method. But it showed me selected color is already changed. (it is like yellow=yellow)

    The color is changed but inspect side is not updated.

     

    Sorry for late reply but i have tried many things to fix this. I hope these steps clearly shows you my problem.

    Regards.

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5624 posts

    Posted 24 Dec 2018 Link to this post

    Hello Caner,

    There are no such known issue in the control and to help you further I will need you to open a support ticket and send me a small runnable example that demonstrates the problem so I can investigate.

    In the meantime, I can offer the following ideas:

    • make sure the controls are created on every Page_Init and they always have the same IDs
    • upgrade to the latest version to get support for current browsers
    • ensure accessing the selected color on the server happens only after the page state has been loaded

    Here is a small snippet I also made for you that shows correct control creation and that also obtains the selected color properly:

    protected void Page_Init(object sender, EventArgs e)
    {
        for (int i = 0; i < 3; i++)
        {
            Panel pnl = new Panel();
            pnl.ID = "panel" + i;
            Placeholder1.Controls.Add(pnl);
     
            RadColorPicker picker = new RadColorPicker();
            picker.ID = "picker" + i;
            picker.AutoPostBack = true;
            picker.ColorChanged += Picker_ColorChanged;
            pnl.Controls.Add(picker);
     
            LiteralControl lit = new LiteralControl("selected color will appear here: ");
            lit.ID = "lit" + i;
            pnl.Controls.Add(lit);
     
            //this will be a label so ViewState will persist its text
            Label selCol = new Label();
            selCol.ID = "selColor" + i;
            pnl.Controls.Add(selCol);
        }
    }
     
    private void Picker_ColorChanged(object sender, EventArgs e)
    {
        RadColorPicker picker = sender as RadColorPicker;
        Label selColor = picker.Parent.Controls[2] as Label;
        selColor.Text = HexConverter(picker.SelectedColor);
        selColor.ForeColor = picker.SelectedColor;
    }
     
    private static String HexConverter(System.Drawing.Color c)
    {
        return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
    }
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" ID="sm1" />
            <asp:PlaceHolder runat="server" ID="Placeholder1" />
        </form>
    </body>
    </html>


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Caner
    Caner avatar
    5 posts
    Member since:
    Dec 2018

    Posted 24 Dec 2018 in reply to Marin Bratanov Link to this post

    Thank you for your interest dear Marin.

    I have couple of questions about Client Settings.

    I use the AllowRowsDragDrop="True", AllowRowSelect="True" and EnableDragToSelectRows="True"

    When i change the AllowRowsDragDrop="False" it is back to normal. 

    If  AllowRowsDragDrop="True" it happens. These conditions broke my project. 

    Does this have anything to do with these settings? 

    Regards.

     

  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5624 posts

    Posted 24 Dec 2018 Link to this post

    Hello Caner,

    I advise that you open separate threads for separate issue so each one is kept concise and to the point.

    On the grid question - when a single action has two meanings, issues may happen, depending on the action and the confusion it can cause, and you may have to pick one. That said, the following works fine for me (video attached below) and if you are not using the latest version, I advise that you upgrade to it. In the video you will see how the drag operation has different behavior depending on where you start dragging depending on the item selection - draggin unselected items selects them, dragging selected items drags them. This behavior is expected and if it is confusing, you should pick one feature only for the drag user action.

    <telerik:RadGrid runat="server" ID="rg1" OnNeedDataSource="rg1_NeedDataSource" AllowPaging="true" AllowMultiRowSelection="true" OnRowDrop="rg1_RowDrop">
        <ClientSettings AllowRowsDragDrop="true">
            <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" />
        </ClientSettings>
    </telerik:RadGrid>
    protected void rg1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        (sender as RadGrid).DataSource = Enumerable.Range(1, 300).Select(o => new { ID = o, someName = "name " + o });
    }
     
    protected void rg1_RowDrop(object sender, GridDragDropEventArgs e)
    {
        Response.Write(string.Format("{0} items dropped {1} row {2}", e.DraggedItems.Count, e.DropPosition, e.DestDataItem["ID"].Text));
    }


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Caner
    Caner avatar
    5 posts
    Member since:
    Dec 2018

    Posted 27 Dec 2018 in reply to Marin Bratanov Link to this post

    Hey again Marin.

    Thank you for all of your comments. You saved me a lot.

    I couldn't figure it out how to fix this but i dont need the solution anymore.

    Best Regards.

    Have a nice forums :)


Back to Top