+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Color Picker WebEditor?

Color Picker WebEditor?

3 posts, 0 answered
  1. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    26 Jul 2010
    Link to this post
    Where can I find a ColorPicker WebEditor attribute to apply to my Property?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    26 Jul 2010
    Link to this post
    Hello Steve,

    There is no built-in color picker. You need a custom one. Below is a sample code that implements a custom color picker.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Cms.Web.UI;
    using System.Web.UI;
    using Telerik.Web.UI;
    using Telerik.Framework.Web;
    using System.Drawing;
    using System.Web.UI.WebControls;
      
    /// <summary>
    /// Summary description for WebUITypeEditorCustomColorPicker
    /// </summary>
    ///
      
    namespace Telerik.Samples
    {
        public class WebUITypeEditorCustomColorPicker : WebUITypeEditor<string>
        {
            public WebUITypeEditorCustomColorPicker()
            {
                //
                // TODO: Add constructor logic here
                //
            }
      
            public override string Value
            {
                get
                {
                    return this.SelectedColorValue;
                }
                set
                {
                    this.SelectedColorValue = value;
                }
            }
      
            public string TemplatePath
            {
                get
                {
                    string value = (string)this.ViewState["DialogTemplatePath"];
                    return String.IsNullOrEmpty(value) ? "~/CustomControls/WebUITypeEditorCustomColorPickerTemplate.ascx" : value;
                }
                set
                {
                    this.ViewState["DialogTemplatePath"] = value;
                }
            }
      
      
            public ITemplate Template
            {
                get
                {
                    if (this.template == null)
                        this.template = ControlUtils.GetTemplate<SelectorTemplate>(this.TemplatePath);
                    return this.template;
                }
                set
                {
                    this.template = value;
                }
            }
      
            public string SelectedColorValue
            {
      
                get
                {
                    string value = (string)this.ViewState["SelectedColorValue"];
                    return String.IsNullOrEmpty(value) ? "" : value;
                }
                set
                {
                    this.ViewState["SelectedColorValue"] = value;
                }
            }
      
      
      
            protected override void CreateChildControls()
            {
                base.CreateChildControls();
                this.container = new SelectorContainer(this);
                this.Template.InstantiateIn(this.container);
                container.ColorPicker.ColorChanged += new EventHandler(ColorPicker_ColorChanged);
                Controls.Add(this.container);
      
                  
            }
      
            void ColorPicker_ColorChanged(object sender, EventArgs e)
            {
                SelectedColorValue = ColorTranslator.ToHtml(container.ColorPicker.SelectedColor);
                container.ColorLabel.Text = SelectedColorValue;
            }
      
      
      
            public class SelectorContainer : GenericContainer<WebUITypeEditorCustomColorPicker>
            {
      
                public SelectorContainer(WebUITypeEditorCustomColorPicker owner)
                    : base(owner)
                {
                }
      
      
                public RadColorPicker ColorPicker
                {
                    get
                    {
                        if (this._ColorPicker == null)
                            this._ColorPicker = base.FindRequiredControl<RadColorPicker>("RadColorPicker1");
                        return this._ColorPicker;
                    }
                }
      
                public Label ColorLabel
                {
                    get
                    {
                        if (this._ColorLabel == null)
                            this._ColorLabel = base.FindRequiredControl<Label>("Label1");
                        return this._ColorLabel;
                    }
                }
      
                private RadColorPicker _ColorPicker;
                private Label _ColorLabel;
            }
      
      
            public class SelectorTemplate : ITemplate
            {
                public void InstantiateIn(Control container)
                {
                }
            }
      
            private ITemplate template;
            public SelectorContainer container;
        }
    }

    template

    <style type="text/css">
    .infoPanel, .bigModule {
    background: repeat-x scroll 0 0 #FFF3C8;
    border:1px solid #FFE58A;
    color:#000000;
    margin:1.6em 0;
    padding:1em 3em 1em 0;
    }
      
    </style>
      
     <div class="infoPanel">
     selectted color
     <strong><asp:Label ID="Label1" runat="server" /></strong>
     </div>
      
    Please choose a color
      <telerik:RadColorPicker runat="server" ID="RadColorPicker1" PaletteModes="WebPalette" AutoPostBack="true">
     </telerik:RadColorPicker>
       
      
      <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxSettingCreating="RadAjaxManager1_AjaxSettingCreating">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadColorPicker1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>


    How to use it - create a string property and add WebEditor attribute


    [WebEditor("Telerik.Samples.WebUITypeEditorCustomColorPicker, App_Code")]
       public string TestPicker
       {
           get
           {
               return this._TestPicker;
           }
           set
           {
               this._TestPicker = value;
           }
       }
      
       private string _TestPicker;


    Sincerely yours,
    Ivan Dimitrov
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  3. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    26 Jul 2010
    Link to this post
    Fantastic, thanks :)
Register for webinar
3 posts, 0 answered