Add ColorPickerItem Argument

[Joe]

Hi,

I am using a color picker for an ecommerce site.  I am using it as a color swatch for the user to select the color of shirt they want.  Everything is working as expected with one exception.  I need to find a way to add another argument to the ColorPickerItem in addition to the value and title.

The logic works like this.  The admin adds an attribute such as 'color' to the product.  The attribute is assigned a control (ColorPicker). The admin then adds values to the control (Red, Blue, White, etc.).  The ecommerce site logic usually works with a dropdown control which also has only 2 arguments (value, text).  The value is the database value of the 'attribute-value' (Red-id, Blue-id, etc.).  How can I add another argument to RadColorPicker such as RadColorPicker(int Id, Color value, String title).  

Here is some code:  Hope this makes sense.

///***Add ColorSwatch Control
                            case AttributeControlTypeEnum.ColorSwatch:
                                {
                                    ///***Define RadColorPicker Attributes
                                    RadColorPicker rcpColorSwatch = new RadColorPicker();
                                    rcpColorSwatch.ID = attribute.ProductAttribute.Name;
                                    rcpColorSwatch.Preset = ColorPreset.None;
                                    rcpColorSwatch.ShowEmptyColor = false;
                                    rcpColorSwatch.PreviewColor = false;
                                    ///***Add Attribute Collection Values to ColorPickerItemCollection
                                    ProductVariantAttributeValueCollection pvaValues = attribute.ProductVariantAttributeValues;
                                    foreach (ProductVariantAttributeValue pvaValue in pvaValues)
                                    {
                                        string pvaValuepvaValueName = pvaValue.Name;
                                        decimal priceAdjustmentBase = TaxManager.GetPrice(productVariant, pvaValue.PriceAdjustment);
                                        decimal priceAdjustment = CurrencyManager.ConvertCurrency(priceAdjustmentBase, CurrencyManager.PrimaryStoreCurrency, NopContext.Current.WorkingCurrency);
                                        if (priceAdjustmentBase > decimal.Zero)
                                            pvaValueName += string.Format(" [+{0}]", PriceHelper.FormatPrice(priceAdjustment, false, false));
                                        ColorPickerItem cpiValueItem = new ColorPickerItem((ColorTranslator.FromHtml(pvaValue.ProductVariantAttributeValueID.ToString())), (pvaValueName));
                                        rcpColorSwatch.Items.Add(cpiValueItem);                                          ///Above-This is the ValueId of color.  I need this plus the color value
                                    }
                                    divAttribute.Controls.Add(rcpColorSwatch);
                                }
                                break;

  

[Tsvetie]

Hello Joe,
Unfortunately, you cannot add a custom attribute to a color picker item. However, you can use the Attributes collection of the color picker control itself to store additional data for the items in the items collection. For example:

protected void Page_Load(object sender, EventArgs e)
{
    RadColorPicker rcpColorSwatch = new RadColorPicker();
    rcpColorSwatch.ID = "RadColorPicker1";
    rcpColorSwatch.Preset = ColorPreset.None;
    rcpColorSwatch.ShowEmptyColor = false;
    rcpColorSwatch.PreviewColor = false;
    ///***Add Attribute Collection Values to ColorPickerItemCollection
    Color[] colors = new Color[] { ColorTranslator.FromHtml("#0ff"), ColorTranslator.FromHtml("#f0f"), ColorTranslator.FromHtml("#ff0") };
    foreach (Color color in colors)
    {
        ColorPickerItem cpiValueItem = new ColorPickerItem(color, color.Name);
        rcpColorSwatch.Items.Add(cpiValueItem);

        rcpColorSwatch.Attributes.Add(color.Name, String.Format("ID_{0}", color.Name));
    }

    rcpColorSwatch.AutoPostBack = true;
    rcpColorSwatch.ColorChanged += new EventHandler(rcpColorSwatch_ColorChanged);

    Form.Controls.Add(rcpColorSwatch);
}

void rcpColorSwatch_ColorChanged(object sender, EventArgs e)
{
    RadColorPicker colorPicker = sender as RadColorPicker;
    Color selectedColor = colorPicker.SelectedColor;
    Label1.Text = colorPicker.Attributes[selectedColor.Name].ToString();
}

Sincerely yours,
Tsvetie
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Joe]

Hi Tsvetie,

I tried your code and it appears to be working with one strange side effect.  When I click on a color the page post backs and my label control displays the id of a color, but always the last color in the picker list.  The control also highlights the last 2 colors on postback and you can not click on any other color to postback another color.  Is there some sort of clearing logic that needs to be added?  Here is my code for you to look at.

case AttributeControlTypeEnum.ColorSwatch:
                                {
                                    ///***Define RadColorPicker Attributes
                                    RadColorPicker rcpColorSwatch = new RadColorPicker();
                                    rcpColorSwatch.ID = "RadColorPicker1";
                                    rcpColorSwatch.Preset = ColorPreset.None;
                                    rcpColorSwatch.ShowEmptyColor = false;
                                    rcpColorSwatch.PreviewColor = false;
                                    rcpColorSwatch.AutoPostBack = true;

                                    ///***I had to nest your foreach code because each color generated is based on another attribute
                                    ProductVariantAttributeValueCollection pvaValues = attribute.ProductVariantAttributeValues;
                                    foreach (ProductVariantAttributeValue pvaValue in pvaValues)
                                    {
                                        Color[] colors = new Color[] { ColorTranslator.FromHtml("#0ff") }; ///***this will eventually come from a database field
                                        string pvaValueName = pvaValue.Name;
                                        decimal priceAdjustmentBase = TaxManager.GetPrice(productVariant, pvaValue.PriceAdjustment);
                                        decimal priceAdjustment = CurrencyManager.ConvertCurrency(priceAdjustmentBase, CurrencyManager.PrimaryStoreCurrency, NopContext.Current.WorkingCurrency);
                                        if (priceAdjustmentBase > decimal.Zero)
                                            pvaValueName += string.Format(" [+{0}]", PriceHelper.FormatPrice(priceAdjustment, false, false));
                                        ///***Nested foreach from you
                                        foreach (Color color in colors)
                                        {

                                            ColorPickerItem cpiValueItem = new ColorPickerItem(color, Server.HtmlEncode(pvaValueName));
                                            rcpColorSwatch.Items.Add(cpiValueItem);

                                            rcpColorSwatch.Attributes.Add(color.Name, pvaValue.ProductVariantAttributeValueID.ToString());
                                        }
                                        rcpColorSwatch.ColorChanged += new EventHandler(rcpColorSwatch_ColorChanged);
                                    }
                                    divAttribute.Controls.Add(rcpColorSwatch);
                                }
                                break;

void rcpColorSwatch_ColorChanged(object sender, EventArgs e)
        {
            RadColorPicker colorPicker = sender as RadColorPicker;
            Color selectedColor = colorPicker.SelectedColor;
            Label1.Text = colorPicker.Attributes[selectedColor.Name].ToString();
        }

I also attached a screenshot showing the described behavior.  The top image shows my mouse hovered over the first color and it's name "Black" correctly displayed.  The bottom image shows the post-back result.  You can see that the last 2 colors are highlighted.  The id of color listed in the label (67) is the color id of the third color.  I clicked the first color.

Thanks for your help.  I am so close and I know this is probably something simple that I am missing.

Thanks Tsvetie.

joe

[Tsvetie]

Hello Joe,
The problem in your test page is that you add the same color three times to the color picker control. This is not supported in the RadColorPicker control - you will not get an exception, but whichever item you click, the last item will be marked as selected. In case all colors in the items collection are different, you will get the expected result.

Additionally, the attributes you add to the color picker should be unique for each color - in your case the color.Name for all three colors is the same. Please make sure that the attribute for each color is unique.

All the best,
Tsvetie
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Joe]

Tsvetie,

Everything is working perfectly now.  Thanks for your help.

joe.

Fyi, your suggestion for adding attributes to the RadColorPicker has all sorts of possibilities that I am using now!