Add ColorPickerItem Argument

5 posts, 1 answers
  1. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 28 Jan 2010 Link to this post

    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; 
      
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 02 Feb 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 04 Feb 2010 Link to this post

    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
  5. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 05 Feb 2010 Link to this post

    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.
  6. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 08 Feb 2010 Link to this post

    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!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017