RadColorPicker does not show the value of selected color in Inspect

[Caner]

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.

[Marin Bratanov]

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

[Caner]

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.

[Marin Bratanov]

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

[Caner]

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.

[Marin Bratanov]

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;
}

//courtesy of https://stackoverflow.com/questions/2395438/convert-system-drawing-color-to-rgb-and-hex-value
private static String HexConverter(System.Drawing.Color c)
{
    return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<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

[Caner]

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.

 

[Marin Bratanov]

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

[Caner]

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