This is a migrated thread and some comments may be shown as answers.

RadComboBox disable existing style

5 Answers 456 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Dev
Top achievements
Rank 1
Dev asked on 17 Apr 2013, 06:55 AM
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.

5 Answers, 1 is accepted

Sort by
0
Hristo Valyavicharski
Telerik team
answered on 22 Apr 2013, 06:41 AM
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.
0
Dev
Top achievements
Rank 1
answered on 22 Apr 2013, 01:12 PM
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


0
Hristo Valyavicharski
Telerik team
answered on 25 Apr 2013, 11:51 AM
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.
0
Dev
Top achievements
Rank 1
answered on 25 Apr 2013, 12:23 PM
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

0
Hristo Valyavicharski
Telerik team
answered on 30 Apr 2013, 12:24 PM
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.
Tags
ComboBox
Asked by
Dev
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
Dev
Top achievements
Rank 1
Share this question
or