RadComboBox disable existing style

6 posts, 0 answers
  1. Dev
    Dev avatar
    3 posts
    Member since:
    Apr 2013

    Posted 17 Apr 2013 Link to this post

    I am using RadComboBox in one of the project with lot of select and inputs on the page. The comboBox is picking the default vista like look making it look like an Alien.

    I had tried various option by disabling css etc but none of them worked.

    Here is how the current textbox and select look like in attched image.

    Any help is highly appreciated.

    Thanks.
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 22 Apr 2013 Link to this post

    Hi,

    This looks like a styling issue. What browser and version of Telerik controls do you use? It would be helpful if you could give us link to live demo page or provide us with the implementation at your end so we could reproduce this behavior? 
     

    All the best,
    Hristo Valyavicharski
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Dev
    Dev avatar
    3 posts
    Member since:
    Apr 2013

    Posted 22 Apr 2013 Link to this post

    Hi,

    This is a piece of code.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TestDropdownProject.Test" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            select
            {
                border-width: 1px;
                border-style: solid;
                border-color: #a9a9a9 #dcdcdc #dcdcdc #a9a9a9;
                max-width: 96%;
                padding: 3px 2px;
                background: #fff;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:DropDownList runat="server" Width="225">
                <asp:ListItem Text="Item A" />
                <asp:ListItem Text="Item B" />
                <asp:ListItem Text="Item C" />
            </asp:DropDownList>
            <br />
            <br />
            <br />
            <telerik:RadComboBox ID="ddlCustomers" runat="server" Height="200" Width="225" Filter="Contains"
                MarkFirstMatch="true" ChangeTextOnKeyBoardNavigation="false">
                <Items>
                    <telerik:RadComboBoxItem Text="Item A" Value="0" />
                    <telerik:RadComboBoxItem Text="Item B" Value="1" />
                </Items>
            </telerik:RadComboBox>
        </div>
        </form>
    </body>
    </html>


    The issue is i want to show the telerik dropdown look similar to the existing normal asp.net dropdown control. I cannot convert all dropdowns to the telerik neither can change existing style.

    The telerik one look very different and is not picking the css i put it on the top possbily it renders conmbobox with input.

    Thanks,

    Any help is highly appreciated.


    THis is the production css for my dropdowns.

    select
            {
                border-width: 1px;
                border-style: solid;
                border-color: #a9a9a9 #dcdcdc #dcdcdc #a9a9a9;
                max-width: 96%;
                padding: 3px 2px;
                background: #fff;
            }

    I want telerik one should look based on this.

    Also the arrow on the left hand side is picking up some image making it more alien to the existing design.


    Let me know if this make some sense.

    THanks


    EDIT:

    Forgoot to mention i am using this version of telerik
    2012.3.1308.40


  4. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 25 Apr 2013 Link to this post

    Hi,

    To visualize RadComboBox in the same way as standard ASP.NET drop down, you could set RenderMode property to Native and remove these styles:
        <telerik:RadComboBox ID="ddlCustomers" runat="server" Height="200" Width="225" Filter="Contains"RenderMode="Native"
            MarkFirstMatch="true" ChangeTextOnKeyBoardNavigation="false">
            <Items>
                <telerik:RadComboBoxItem Text="Item A" Value="0" />
                <telerik:RadComboBoxItem Text="Item B" Value="1" />
            </Items>
        </telerik:RadComboBox>
    </div>



    All the best,
    Hristo Valyavicharski
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Dev
    Dev avatar
    3 posts
    Member since:
    Apr 2013

    Posted 25 Apr 2013 Link to this post

    There is nothing like RenderMode="Native"  property in 2012 rather than there is RendingMode property.

    I try to use this property RenderingMode="Simple".

    This makes RadComboBox look like normal dropdown visually but also functionally lose all other features like capability to write in radcombobox which i dont want.

    I just want to look it like a Dropdown but at the sametime allow me to write in the Drodown. Else what is the use of RadComboBox then?

    I use RadComboBox because it let me filter by typing in the dropdown.


    Thanks

  6. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 30 Apr 2013 Link to this post

    Hi,

    RenderingMode property is obsolete now. As from Q1 2013, RadComboBox introduces the new "RenderMode" property, which accepts three values - Classic, Lightweight and Native.

    Unfortunately there is no way to make RadComboBox to look like the standard ASP.NET drop down and act as RadComboBox. This is because RadComboBox is much complicated than the standard drop down. It has templates, filtering, virtual scrolling, load on demand and other features which if you use the combo will be rendered as many div and span elements.

    However you could use RadFormDecarator to make the standard dropdowns and selects to look like RadComboBox.

    Regards,
    Hristo Valyavicharski
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top