RadFormDecorator asp:dropdownlist tabindex not working..not getting highlighted/focused

4 posts, 0 answers
  1. Jinisha
    Jinisha avatar
    33 posts
    Member since:
    Oct 2012

    Posted 23 Oct 2012 Link to this post

    <telerik:RadFormDecorator ID="rfd1" EnableEmbeddedSkins="true" EnableAjaxSkinRendering="true" DecoratedControls="Buttons, Scrollbars, Select, Textbox, Textarea"
            Runat="server" Skin="Vista"/>

    I have added RadFormDecorator that decorates all the asp:dropdownlist. However, when I tab through the page...it does not highlight/focus on any dropdownlists. Please advice how to fix this!

    Thanks!


  2. Jinisha
    Jinisha avatar
    33 posts
    Member since:
    Oct 2012

    Posted 24 Oct 2012 Link to this post

    Also I am not able to select the dropdown using the keyboard.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jinisha
    Jinisha avatar
    33 posts
    Member since:
    Oct 2012

    Posted 24 Oct 2012 Link to this post

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    <%@ 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">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <telerik:RadScriptManager ID="ScriptManager1" runat="server">
                </telerik:RadScriptManager>
        <telerik:RadFormDecorator ID="rfd1" EnableEmbeddedSkins="true" EnableAjaxSkinRendering="true" DecoratedControls="Buttons, Scrollbars, Select, Textbox, Textarea, Label, ValidationSummary"
            Runat="server" Skin="Vista"/>
        <h2>TabIndex Test</h2>
        <h5>Form Without Tables</h5>
        <form action="#" method="post">
           <p>First Item : <input type="text" name="first" tabindex="1" /></p>
           <p>Second Item : <input type="text" name="second" tabindex="2" /></p>
           <p>Third Item : <select name="third" tabindex="3"><option value="foo">Foo</option><option value="bar">Bar</option></select></p>
           <p>Fourth Item : <select name="fourth" tabindex="4"><option value="foo">Foo</option><option value="bar">Bar</option></select></p>
           <p>Fifth Item : <input type="text" name="fifth" tabindex="5" /></p>
           <input type="submit" value="Submit" tabindex="6" />
        </form>
    </body>
    </html>

    I have added RadFormDecorator that decorates all the asp:dropdownlist. However, when I tab through the page...it does not highlight/focus on any dropdownlists. Please advice how to fix this!

    Thanks!


  5. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 26 Oct 2012 Link to this post

    Hello,

    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 are not able to style the <select> element, 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.


    Greetings,
    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