Creating a Custom Skin

[Kevin White]

What I am trying to do is create the illusion that the combobox is essentially a label when the Enabled property is set to false.  i.e. when Enabled == false, the dropdown arrow is hidden and the border is removed.  In this way the page looks nice and neat when in read only (enabled == false) mode, and when in edit mode, the user sees all the lovely RadComboBoxes.

Can this be done with the current RadComboBox css?  Im using WebBlue as a template when I created mu own.

[Yana]

Hello Kevin,

Please find attached a sample project demonstrating how to change styles of RadComboBox when it is in read-only mode ( Enabled property set to false ). You could download it give it a try.

Hope this helps. 

Best wishes,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kevin White]

Thanks Yana, that is almost perfect.  Last part would be to make the text Black instead of the medium gray.

I thought adding a "Color: #000;" to your disabled styles would do it, but it did not.  Is it possible to set the font color to black through the CSS on the disabled item?

Kevin

[Yana]

Hello Kevin,

Thank you for getting back to me.

The text in RadComboBox is rendered as <input> and when the combobox is disabled, the input tag is also disabled and the problem is that IE doesn't allow styling the color of the text in disabled input tags. For other browsers the following css will change the text color:

.RadComboBox_WebBlue .rcbDisabled .rcbInputCell .rcbInput
{
   color: #000 !important;
}

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kevin White]

Ok thanks for the information Yana.  Unfortunetly the users in my company are used to seeing in the application I am rewritting, the read only mode as normal text and edit mode as textboxes or comboboxes.  So for fun, I am posting some code here for anyone that may want to try what I am doing.

I created a class library to hold my custom server controls. I am inheriting from the CompositeControl class for my custom controls. Inside the control I have 2 controls. One for read only mode, and one for write mode.  I use generics so I dont have a lot of code duplication.  The code below is my starting point for a two state textbox and a two state combobox. Its just the start, but it gives you an idea of where I am headed.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.ComponentModel;

namespace MyCompany.Web.UI
{
    /// <summary>
    /// Interfact for all the controls that may contain 2 controls for a read and a write mode
    /// </summary>
    public interface ITwoStateControl
    {
        /// <summary>
        /// boolean if the control is in edit mode or read only mode
        /// </summary>
        bool Editable { get; set; }
    }

    /// <summary>
    /// abstract class to use for all two state controls
    /// </summary>
    /// <typeparam name="T">The type used for the read only control</typeparam>
    /// <typeparam name="V">The type used for the write control</typeparam>
    public abstract class TwoStateControl<T, V> : CompositeControl, ITwoStateControl
        where T : WebControl, new()
        where V : WebControl, new()
    {
        protected T m_ReadControl = null;
        protected V m_EditControl = null;

        public override Unit Width
        {
            get
            {
                EnsureChildControls();
                return m_EditControl.Width;
            }
            set
            {
                EnsureChildControls();
                m_EditControl.Width = value;
            }
        }

        public override Unit Height
        {
            get
            {
                EnsureChildControls();
                return m_EditControl.Height;
            }
            set
            {
                EnsureChildControls();
                m_EditControl.Height = value;
            }
        }

        [Browsable(true)]
        [Category("Behavior")]
        [DefaultValue(false)]
        public bool Editable
        {
            get
            {
                EnsureChildControls();

                if (m_EditControl.Visible == m_ReadControl.Visible)
                    this.Enabled = false;

                return m_ReadControl.Visible;
            }
            set
            {
                EnsureChildControls();
                m_EditControl.Visible = value;
                m_ReadControl.Visible = !value;
            }
        }

        protected override void RecreateChildControls()
        {
            EnsureChildControls();
        }

        protected override void CreateChildControls()
        {
            this.Controls.Clear();

            m_ReadControl = new T();
            m_ReadControl.ID = "_Read";
            this.Controls.Add(m_ReadControl);

            m_EditControl = new V();
            m_EditControl.ID = "_Write";
            this.Controls.Add(m_EditControl);

            this.ChildControlsCreated = true;

            m_EditControl.Visible = (this.Editable);
            m_ReadControl.Visible = (!this.Editable);
        }
    }

    [ToolboxData("<{0}:PowerTextBox runat=\"server\" ControlMode=\"READ_ONLY\"> </{0}:PowerTextBox>")]
    [ToolboxBitmap(typeof(Button))]
    public class TwoStateTextBox : TwoStateControl<Label, RadTextBox>
    {
        [Browsable(true)]
        [Category("Behavior")]
        public string Text
        {
            get
            {
                EnsureChildControls();
                return this.m_EditControl.Text;
            }
            set
            {
                EnsureChildControls();
                ((Label)this.m_ReadControl).Text = value;
                ((RadTextBox)this.m_EditControl).Text = value;
            }
        }
    }

    [ToolboxData("<{0}:PowerComboBox2 runat=\"server\" ControlMode=\"READ_ONLY\"> </{0}:PowerComboBox2>")]
    [ToolboxBitmap(typeof(DropDownList))]
    public class TwoStateComboBox : TwoStateControl<Label, RadComboBox>
    {
        public TwoStateComboBox()
        {
            EnsureChildControls();
        }

        [Browsable(true)]
        [Category("Data")]
        public string DataSourceID
        {
            get
            {
                EnsureChildControls();
                return this.m_EditControl.DataSourceID;
            }
            set
            {
                EnsureChildControls();
                this.m_EditControl.DataSourceID = value;
            }
        }

        [Browsable(true)]
        [Category("Data")]
        public object DataSource
        {
            get
            {
                EnsureChildControls();
                return this.m_EditControl.DataSource;
            }
            set
            {
                EnsureChildControls();
                this.m_EditControl.DataSource = value;
            }
        }

        [Browsable(true)]
        [Category("Data")]
        public string DataTextField
        {
            get
            {
                EnsureChildControls();
                return this.m_EditControl.DataTextField;
            }
            set
            {
                EnsureChildControls();
                this.m_EditControl.DataTextField = value;
            }
        }

        [Browsable(true)]
        [Category("Data")]
        public string DataValueField
        {
            get
            {
                EnsureChildControls();
                return this.m_EditControl.DataValueField;
            }
            set
            {
                EnsureChildControls();
                this.m_EditControl.DataValueField = value;
            }
        }

        [Browsable(true)]
        [Category("Data")]
        public string SelectedValue
        {
            get
            {
                EnsureChildControls();
                return this.m_EditControl.SelectedValue;
            }
            set
            {
                EnsureChildControls();
                this.m_EditControl.ClearSelection();
                RadComboBoxItem rcbi = this.m_EditControl.FindItemByValue(value);
                rcbi.Selected = true;
                this.m_ReadControl.Text = rcbi.Text;
            }
        }

        [Browsable(false)]
        public string Text
        {
            get
            {
                EnsureChildControls();
                return this.m_EditControl.SelectedItem.Text;
            }
        }

        public override void DataBind()
        {
            this.m_EditControl.DataBind();
        }

    }

}

[Kevin White]

Oh and I know that was the long way to get it done, but it was a chance to learn and play with generics and the composite control.  Below is the quick and dirty way.

[ToolboxData("<{0}:RadComboBoxPlus runat=\"server\" ></{0}:RadComboBoxPlus>")]
[ToolboxBitmap(typeof(RadComboBox))]
public class RadComboBoxPlus : RadComboBox
{
    public bool ReadOnly
    {
        get
        {
            if (this.ViewState["ReadOnly"] == null)
                this.ReadOnly = false;
            return (bool)this.ViewState["ReadOnly"];
        }
        set
        {
            this.ViewState["ReadOnly"] = value;
        }
    }

    protected override void Render(HtmlTextWriter writer)
    {
        if (this.ReadOnly)
        {
            Label l = new Label();
            RadComboBoxItem li = this.SelectedItem;
            l.Text = (li == null) ? "" : li.Text;
            l.RenderControl(writer);
        }
        else
            base.Render(writer);
    }
}