How to change the DDL icon

2 posts, 1 answers
  1. Sherri
    Sherri avatar
    3 posts
    Member since:
    May 2008

    Posted 20 Feb 2015 Link to this post

    I have been asked to change the icon in the drop down list from the "V" to a custom image.  Is this possible?  If so, what would your recommend is the best way to do so? 

    Please see the attached image as an example.  I've highlighted what we would like to change in a red box.

    Thank you.
  2. Answer
    Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 23 Feb 2015 Link to this post

    Hello,

    As I can see you are using RadComboBox control, not RadDropDownList. The easiest way to change the icon is to use Lightweight RadComboBox and your custom font.
    In the following example I used our default font and I applied another icon on the RadComboBox action button:
    <head runat="server">
        <title>ComboBox</title>
        <style>
            html .RadComboBox .rcbActionButton .rcbIconDown:before {
                content: "\E048";
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server" method="post">
            <h1>Combo</h1>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
                </Scripts>
            </telerik:RadScriptManager>
            <div>
                <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="300px" Skin="Office2007"
                    RenderMode="Lightweight" AllowCustomText="true">
                    <Items>
                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1RadComboBoxItem1" Value="RadComboBoxItem1" />
                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2RadComboBoxItem1" Value="RadComboBoxItem2" />
                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3RadComboBoxItem1" Value="RadComboBoxItem3" />
                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4RadComboBoxItem1" Value="RadComboBoxItem4" />
                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5RadComboBoxItem1" Value="RadComboBoxItem5" />
                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem6RadComboBoxItem1" Value="RadComboBoxItem6" />
                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem7RadComboBoxItem1" Value="RadComboBoxItem7" />
                    </Items>
                </telerik:RadComboBox>
            </div>
        </form>
    </body>

    Hope this will be helpful.

    Regards,
    Aneliya Petkova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top