Grumpwurst
Top achievements
Rank 1
Rank 1
Grumpwurst
asked on 29 Jun 2012, 10:15 PM
All,
I ran across this control as I was digging through the fabulous and voluminous documenation of the Telerik controls and am trying to get this to work on the asp:DropDownList control because we are using RadControls on our new development and it'll take time (and budget) to go back and change the older pages over.
What seems awesome is that it appears that one could use the RadFormDecorator and at least trick the user into thinking all the controls are the same.
But, what I'm running into is that the asp:DropDownList doesn't seem to be decorated, but if I use the HTML to create a drop down list (SELECT), it works.
I also noticed that the RadFormDecorator wasn't applying the designated theme against RadControls either...
Is there something I'm missing?
EDITED TO ADD:
I forgot to mention that the application ultimately will only be run in IE8/9, but it's behaving the same way in Firefox
Thanks,
Ray
Here is my code
I ran across this control as I was digging through the fabulous and voluminous documenation of the Telerik controls and am trying to get this to work on the asp:DropDownList control because we are using RadControls on our new development and it'll take time (and budget) to go back and change the older pages over.
What seems awesome is that it appears that one could use the RadFormDecorator and at least trick the user into thinking all the controls are the same.
But, what I'm running into is that the asp:DropDownList doesn't seem to be decorated, but if I use the HTML to create a drop down list (SELECT), it works.
I also noticed that the RadFormDecorator wasn't applying the designated theme against RadControls either...
Is there something I'm missing?
EDITED TO ADD:
I forgot to mention that the application ultimately will only be run in IE8/9, but it's behaving the same way in Firefox
Thanks,
Ray
Here is my code
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="ActivityProperties.aspx.cs" Inherits="BAC.IRIS.UI.Web.ActivityProperties" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><htmlxmlns="http://www.w3.org/1999/xhtml"><headid="Head1"runat="server"><title></title></head><bodystyle="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px;"><formid="Telerik"runat="server"><telerik:RadScriptManagerID="RadScriptManager1"runat="server"></telerik:RadScriptManager><telerik:RadFormDecoratorID="RadFormDecorator1"runat="server"DecoratedControls="All"EnableRoundedCorners="true"Skin="Black"/><h4>Test</h4><tableid="LeftColumn"cellpadding="3"cellspacing="0"width="100%"><tr><tdalign="left"valign="top"><asp:LabelID="lblActivityIDDesc"runat="server"Text="Activity ID: "/></td><td></td><tdalign="left"><telerik:RadTextBoxID="radActivityID"runat="server"ReadOnly="true"/></td></tr><tr><tdalign="left"valign="top"><asp:LabelID="Label1"runat="server"Text="Activity Type: "/><asp:LabelID="Label2"runat="server"Text="*"/></td><td></td><tdalign="left"valign="top"><asp:DropDownListID="ddlActivityType"runat="server"><asp:ListItemText="Test Item"Value="1"/></asp:DropDownList></td></tr><tr><tdalign="left"valign="top"><asp:LabelID="Label3"runat="server"Text="Activity Type: "/><asp:LabelID="Label4"runat="server"Text="*"/></td><td></td><tdalign="left"valign="top"><selectid="select1"name="ddlTest"><optionvalue="1">Test Item</option></select></td></tr></table></form></body></html>
7 Answers, 1 is accepted
0
Hi,
I have tested your code and everything works as expected and the ASP dropdown list is decorated as it should be.
You could also check RadFormDecorator Demo Page where you could see the decorated dropdown list.
Attached is also dropdown.gif showing the result of a decorated dropdown list.
All the best,
Bozhidar
the Telerik team
I have tested your code and everything works as expected and the ASP dropdown list is decorated as it should be.
You could also check RadFormDecorator Demo Page where you could see the decorated dropdown list.
Attached is also dropdown.gif showing the result of a decorated dropdown list.
All the best,
Bozhidar
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Grumpwurst
Top achievements
Rank 1
Rank 1
answered on 02 Jul 2012, 01:48 PM
Bozhidar,
Thanks for the reply. I knew that the Form Decorator should be "skinning" the asp:dropdown controls because I saw it working on the demos. But, ultimately, I think I figured it out. I needed to put EnableTheming=false into the markup for the asp:dropdown to get it working.
Despite the fact that I wasn't referencing the CSS file in the App_Themes directory, I'm guessing it was being picked up and utilized anyway.
Thanks,
Ray
Thanks for the reply. I knew that the Form Decorator should be "skinning" the asp:dropdown controls because I saw it working on the demos. But, ultimately, I think I figured it out. I needed to put EnableTheming=false into the markup for the asp:dropdown to get it working.
Despite the fact that I wasn't referencing the CSS file in the App_Themes directory, I'm guessing it was being picked up and utilized anyway.
Thanks,
Ray
0
Hi Ray,
I am glad you found a solution. I think I know what the problem should be. When you apply class or CssClass to any element styled by RadFormDecorator, the css class will prevent the element forma decoration. In that case we consider, that the developer would like to apply own styles to the element and that`s why we do not decorate it. I think that EnableTheming set to true is applying some css classes to the dropdown element and that`s why it is not decorated. The following simple code shows the behavior, not that the dropdown that has a CssClass property is not decorated:
All the best,
Bozhidar
the Telerik team
I am glad you found a solution. I think I know what the problem should be. When you apply class or CssClass to any element styled by RadFormDecorator, the css class will prevent the element forma decoration. In that case we consider, that the developer would like to apply own styles to the element and that`s why we do not decorate it. I think that EnableTheming set to true is applying some css classes to the dropdown element and that`s why it is not decorated. The following simple code shows the behavior, not that the dropdown that has a CssClass property is not decorated:
<body style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px;"> <form id="Telerik" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" EnableRoundedCorners="true" Skin="Black" /> <asp:DropDownList ID="ddlActivityType" runat="server"> <asp:ListItem Text="Test Item" Value="1" /> </asp:DropDownList> <asp:DropDownList ID="DropDownList1" runat="server" CssClass="someClass"> <asp:ListItem Text="Test Item" Value="1" /> </asp:DropDownList> </form></body></html>All the best,
Bozhidar
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Aarsh
Top achievements
Rank 1
Rank 1
answered on 10 Oct 2012, 05:51 PM
- Tabbing seemed not to be working on RadFormDecorator Demo Page.
- I would like to (highlight liek asp dd / view the text cursor like radcombo) the dropdownlist when focused. with decorator it does neither :-/
0
Hi,
In order to beautify the elements it needs to add some HTML wrappers that we can style properly around (or sometimes instead of) the elements. Actually we remove the real select elements and replace it with unordered list, as we <select> is not to be styled, while we do not have problems to style <ul>. As after the decoration this is not a real HTML (select) tag it has some issues with keyboard support and we have done everything possible with regard to the many differences between the browsers. Currently navigation through the keyboard is supported in IE and you can use the up and down arrows to navigate through the options and enter or Alt+down to expand the dropdown. It is also not possible to change its style to look selected (i.e. the usual blue background) at this point. If a viable cross-browser solution is found we will incorporate it in the code. Please also note that the focused style varies between browsers - e.g. IE creates a dotted line, while FF adds a box that resembles a shadow around the buttons. All that being said - if keyboard support is extremely important for your site the best suggestion is to revert to a page without the FromDecorator, or to Skip just the Drop down decoration using ControlsToSkip property.
Kind regards,
Bozhidar
the Telerik team
In order to beautify the elements it needs to add some HTML wrappers that we can style properly around (or sometimes instead of) the elements. Actually we remove the real select elements and replace it with unordered list, as we <select> is not to be styled, while we do not have problems to style <ul>. As after the decoration this is not a real HTML (select) tag it has some issues with keyboard support and we have done everything possible with regard to the many differences between the browsers. Currently navigation through the keyboard is supported in IE and you can use the up and down arrows to navigate through the options and enter or Alt+down to expand the dropdown. It is also not possible to change its style to look selected (i.e. the usual blue background) at this point. If a viable cross-browser solution is found we will incorporate it in the code. Please also note that the focused style varies between browsers - e.g. IE creates a dotted line, while FF adds a box that resembles a shadow around the buttons. All that being said - if keyboard support is extremely important for your site the best suggestion is to revert to a page without the FromDecorator, or to Skip just the Drop down decoration using ControlsToSkip property.
Kind regards,
Bozhidar
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
Aarsh
Top achievements
Rank 1
Rank 1
answered on 11 Oct 2012, 12:42 PM
Thanks, but this is to me is like a bone in a throat, for appearance's consistency I am so liking the way, one line of code can just make any web application into an eye candy, but I still need to figure out the way for having the selected item's background color to be changed, a CSS can fix it, may be ?
Thanks for your response,
-Aarsh
Thanks for your response,
-Aarsh
0
Hi,
I have already answered your question in another thread. Make sure you are posting in just one of them as it will confuse other users. Here it is once again:
The :focus element is supported for input elements, not LI elements as in the case of decorated dropdown. I tested in IE and you could browse the dropdown list item using keys and each selected item is highlighted with a different background than default one. We can not do things that browser does not allow us to do.
Kind regards,
Bozhidar
the Telerik team
I have already answered your question in another thread. Make sure you are posting in just one of them as it will confuse other users. Here it is once again:
The :focus element is supported for input elements, not LI elements as in the case of decorated dropdown. I tested in IE and you could browse the dropdown list item using keys and each selected item is highlighted with a different background than default one. We can not do things that browser does not allow us to do.
Kind regards,
Bozhidar
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.