Optgroup

[Merin]

Hi folks

Anyone know whether this control support optgroups as in html?

Thanks
Merin

[Shinu]

Hi Merin,

RadComboBox supports grouping of items like optgroups in html. Please have a look into the following sample code I tried which works fine at my end.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Silk" Width="150px" AllowCustomText="true">
    <Items>
        <telerik:RadComboBoxItem runat="server" IsSeparator="True" Text="DotNet" />
        <telerik:RadComboBoxItem runat="server" Text="ASP" />
        <telerik:RadComboBoxItem runat="server" Text="WCF" />
        <telerik:RadComboBoxItem runat="server" IsSeparator="True" Text="Java" />
        <telerik:RadComboBoxItem runat="server" Text="JSF" />
        <telerik:RadComboBoxItem runat="server" Text="ATG" />
    </Items>
</telerik:RadComboBox>

CSS:

<style type="text/css">
    div.RadComboBoxDropDown_Silk .rcbSeparator
    {
        font-family: Arial;
        font-weight: bold;
        font-style: italic;
        font-size: 10pt;
        padding-left: 6px !important;
    }
    div.RadComboBoxDropDown_Silk .rcbItem, div.RadComboBoxDropDown_Vista .rcbHovered
    {
        padding-left: 20px;
        font-family: Arial;
        font-size: 10pt;
    }
</style>

Thanks,
Shinu.

[Merin]

Thanks shinu. Got it :)
One little tweak. Can I have a different color other than black for those group header?

[Shinu]

Hi Merin,

Please have a look at the following updated CSS for the RadComboBox separator.

CSS:

<style type="text/css">
    div.RadComboBoxDropDown_Silk .rcbSeparator
    {
        color: Black;
        background-color: Beige;
        font-family: Arial;
        font-weight: bold;
        font-style: italic;
        font-size: 10pt;
        padding-left: 6px !important;
    }
</style>

Thanks,
Shinu.

[Merin]

Hi shinu, can we achieve the same in a raddropdownlist?

[Shinu]

Hi Merin,

Currently RadDropDownList doesn't support optgroups.

Thanks,
Shinu.