RadComboBox for ASP.NET AJAX

RadControls for ASP.NET AJAX

Defining separators

To make a RadComboBoxItem separator you should simply mark the item with IsSeparator="True"

CopyASPX
<telerik:radcombobox 
    id="RadComboBox1" 
    runat="server" 
    height="140px" 
    width="150px"
    accesskey="T" 
    tabindex="1" 
    tooltip="Select a city">   
     <Items>       
          <telerik:RadComboBoxItem runat="server" IsSeparator="True" Text="Animals" />       
          <telerik:RadComboBoxItem runat="server" Text="pig" />        
          <telerik:RadComboBoxItem runat="server" Text="dog" />        
          <telerik:RadComboBoxItem runat="server" IsSeparator="True" Text="Birds" />        
          <telerik:RadComboBoxItem runat="server" Text="Eagle" />        
      </Items>    
  <CollapseAnimation Duration="200" Type="OutQuint" />
  </telerik:radcombobox>

Client-side methods

At the client-side, you can check whether an item is a separator using the get_isSeperator() method:

CopyJavaScript
var comboBox = $find("<%=RadComboBox1.ClientID %>");
var item = comboBox.findItemByText("Separator");
if (item.get_isSeparator()) {
    alert("The item is a separator"); 
 }

To make an item a separator, you can use the set_isSeparator() method:

CopyJavaScript
var comboBox = $find("<%=RadComboBox1.ClientID %>");
var item = comboBox.findItemByText("Separator");
item.set_isSeparator(true);

Css Classes

The CSS class applied to the RadComboBox separators is called:

rcbSeparator

To define your custom appearance you should simply add a style to the <head> tag of your aspx page holding the combobox:

CopyCSS
<style>
  .rcbSeparator
     {
         //you custom definition, i.e.  color: red !important;
     }
</style>