RadComboBox for ASP.NET AJAX
Contents
RadControls Send comments on this topic.
Tutorial: Creating a Custom Skin
See Also
Controls > RadComboBox > Appearance and Styling > Tutorial: Creating a Custom Skin

Glossary Item Box

The following tutorial demonstrates creating a custom RadComboBox skin, using the default skin as a base. This new skin will use a new graphic for the drop down button toggle, new background color for selected items and a new color for disabled items. See Understanding the Skin CSS File for more information on specific CSS file properties.

 

Prepare the Project

  1. In a new AJAX enabled application web form, add a RadComboBox. Set the EnabledEmbeddedSkins property to false.
  2. In the Solution Explorer, create a new "MySkin" directory in your project.
  3. Copy the default RadComboBox skin files from the installation directory to the "MySkin" directory; copy both the \ComboBox directory that contains the images for this skin and the ComboBox.Default.css file that defines the skin styles.
    The file path will typically be similar to this example: \Program Files\Telerik\<Your Version of RadControls for ASPNET>\Skins\Default.
  4.  The solution should now look something like the screenshot below:


  5. In the Solution Explorer, rename "ComboBox.Default.css" to "ComboBox.MySkin.css".


  6. In MSPaint or other drawing tool of your choice, create a new downward pointing arrow graphic, name it "myArrowCell.gif" and add it to the project  \MySkin\ComboBox directory. This graphic will replace the default rcbArrowCell.gif. You can use rcbArrowCell.gif as a starting point and make small alterations to the graphic. Changes to the dimensions of the graphic will likely necessititate changes to the dimensions of other items in the CSS file.

Populate the ComboBox

  1. Add an enum "Trees" to the page class as shown in the code example below.
  2. Add a Page_Load event handler to the page class. Replace the event handler using the code shown below. The example code iterates the Trees enumeration and populates the RadComboBox with the names and values. If the value is "Stump", the item is disabled.
    [C#] Adding Items to the ComboBox Copy Code
    using Telerik.Web.UI;
    namespace CustomSkin
    {
           public partial class _Default : System.Web.UI.Page
       {
               private enum Trees {Redwood, Oak, Maple, Stump};

               protected void Page_Load(object sender, EventArgs e)
           {
                   foreach (Trees tree in Enum.GetValues(typeof(Trees)))
               {
                   RadComboBoxItem comboBoxItem =     new RadComboBoxItem(tree.ToString(), tree.ToString("d"));
                   comboBoxItem.Enabled = tree != Trees.Stump;
                   RadComboBox1.Items.Add(comboBoxItem);
               }
           }
       }
    }
    [VB] Adding Items to the ComboBox Copy Code
    Imports Telerik.Web.UI
    Namespace CustomSkin
     Public Partial Class _Default
      Inherits System.Web.UI.Page
      Private Enum Trees
       Redwood
       Oak
       Maple
       Stump
      End Enum
      Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
       For Each tree As Trees In [Enum].GetValues(GetType(Trees))
        Dim comboBoxItem As New RadComboBoxItem(tree.ToString(), tree.ToString("d"))
        comboBoxItem.Enabled = tree <> Trees.Stump
        RadComboBox1.Items.Add(comboBoxItem)
       Next
      End Sub
     End Class
    End Namespace

Edit the Skin CSS File

  1. Open "ComboBox.Default.css" for editing in Visual Studio.
  2. Press Control-H to invoke the Find and Replace dialog.
  3. Set Find what: to "_Default", Replace with: to "_MySkin", and Look in: to Current Document.
  4. Click the Replace All button.


  5. The style sheet should now look something like the example below.


  6. Locate the CSS selector ".RadComboBox_MySkin .rcbInputCell" and change the background to "border-color:Green;".
  7. Locate the CSS selector ".RadComboBoxDropDown_MySkin .rcbHovered" and change the background to "background:LightGreen;".
  8. Locate the CSS selector ".RadComboBox_MySkin .rcbArrowCell". Change the border color to "border-color:Green;". Change the background to "background:url('ComboBox/myArrowCell.gif') 100% -1px no-repeat;".
  9. Locate the CSS selector ".RadComboBoxDropDown_MySkin .rcbDisabled". Change the color to "color:Lime;".
  10. From the Solution Explorer drag the "ComboBox.MySkin.css" to the design surface of the form. This step will automatically add a reference to the page "<head>" tag as a "<link>" as shown in the screenshot below.


  11. Enter "MySkin" to the RadComboBox Skin property.
  12. Press F5 to run the application. Notice the new button graphic and new colors for hover and disabled states.

See Also