Is it possible to format an ASP:DropDownList with RadFormDecorator?

8 posts, 0 answers
  1. Grumpwurst
    Grumpwurst avatar
    8 posts
    Member since:
    Jul 2012

    Posted 29 Jun 2012 Link to this post

    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
    <%@ 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" %>
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <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" />
        <h4>Test</h4>
        <table id="LeftColumn" cellpadding="3" cellspacing="0" width="100%" >
           <tr>
                <td align="left" valign="top">
                    <asp:Label ID="lblActivityIDDesc" runat="server" Text="Activity ID:  "/>
                </td>
                <td>
                       
                </td>
                <td align="left">
                    <telerik:RadTextBox ID="radActivityID" runat="server" ReadOnly="true"/>
                </td>
            </tr>
            <tr>
                <td align="left" valign="top">
                    <asp:Label ID="Label1" runat="server" Text="Activity Type:  "  />
                    <asp:Label ID="Label2" runat="server" Text="*"  />
                </td>
                <td>
                       
                </td>
                <td align="left" valign="top">
                    <asp:DropDownList ID="ddlActivityType" runat="server">
                        <asp:ListItem Text="Test Item" Value="1" />
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td align="left" valign="top">
                    <asp:Label ID="Label3" runat="server" Text="Activity Type:  "  />
                    <asp:Label ID="Label4" runat="server" Text="*"  />
                </td>
                <td>
                       
                </td>
                <td align="left" valign="top">
                    <select id="select1" name="ddlTest">
                    <option value="1">Test Item</option></select>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>
  2. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 02 Jul 2012 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Grumpwurst
    Grumpwurst avatar
    8 posts
    Member since:
    Jul 2012

    Posted 02 Jul 2012 Link to this post

    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
  5. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 03 Jul 2012 Link to this post

    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:

    <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.
  6. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 10 Oct 2012 Link to this post

    • 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 :-/

  7. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 11 Oct 2012 Link to this post

    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
    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.
  8. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 11 Oct 2012 Link to this post

    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
  9. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 11 Oct 2012 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017