DevTools for .NET

Products Dropdown menu
The Ultimate toolbox for developers
WEB UI CONTROLS & COMPONENTS
DESKTOP UI CONTROLS & COMPONENTS
- WPF
- WinForms
VISUAL STUDIO PRODUCTIVITY TOOLS
HTML5 / JavaScript Widgets
DATA TOOLS
- Reporting
- OpenAccess
MOBILE UI CONTROLS
- Windows Phone
Unit & Functional Testing
- Test Studio Express
- JustMock
Download Free Trial With dedicated support.
Online demos
Free trials
Purchase Dropdown menu
Buy the Ultimate toolbox for developers
Buy Online
Call us
- USA:+1-888-365-2779
- UK:+44-20-7291-0580
- Bulgaria:+359-2-8099850
- Germany:+49-89-2441642-70
Community & Support Dropdown menu
Welcome to the Telerik community
Community programs
Like us on facebook Follow us on twitter
Services
Blogs

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAXFormDecoratorCursor not displayed after adding RadFormDecorator

Answered Cursor not displayed after adding RadFormDecorator

Feed from this thread

Paulo

Posted on Sep 16, 2011 (permalink)

Hello.

In the following html page, the cursor is displayed in the login field when the page is loaded:

<!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>

    <title></title>

</head>

<body>

    <center>

    <form id="form1" runat="server" method="post" action="">

        <table style="background:#cccccc" cellpadding="2" cellspacing="3">

            <tr align="center">

                <td></td>

                <td align="right"><label>Login: </label></td>

                <td align="left"><input type="text" id="login" style="width:140px" maxlength="30" /></td>

                <td></td>

            </tr>

            <tr align="center">

                <td></td>

                <td align="right"><label>Password: </label></td>

                <td align="left"><input type="text" id="password" style="width:140px" maxlength="30" /></td>

                <td></td>

            </tr>

        </table>

        <br />



        <input type="button" value="Login" style="width:65px;" />

    </form>

    </center>



    <script type="text/javascript">

        document.forms["form1"]["login"].focus();

    </script>

</body>

</html>

However, when the corresponding aspx page is loaded (with the RadFormDecorator component), the cursor is no longer displayed:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="MemberJoin._Default" %>



<!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>

    <title></title>

</head>

<body>

    <center>

    <form id="form1" runat="server" method="post" action="">

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />



        <table style="background:#cccccc" cellpadding="2" cellspacing="3">

            <tr align="center">

                <td></td>

                <td align="right"><label>Login: </label></td>

                <td align="left"><input type="text" id="login" style="width:140px" maxlength="30" /></td>

                <td></td>

            </tr>

            <tr align="center">

                <td></td>

                <td align="right"><label>Password: </label></td>

                <td align="left"><input type="text" id="password" style="width:140px" maxlength="30" /></td>

                <td></td>

            </tr>

        </table>

        <br />



        <input type="button" value="Login" style="width:65px;" onclick="validateLogin()" />

    </form>

    </center>



    <script type="text/javascript">

        document.forms["form1"]["login"].focus();

    </script>

</body>

</html>

No methods have been implemented in the code behind.
Why isn't the cursor being displayed?

Thank you in advance.
Paulo

Reply

Answer Niko Niko

Posted on Sep 20, 2011 (permalink)

Hi Paulo,

This behavior can be observed only under IE browsers, versions below 9, where the rounded corners of the inputs are done through additional HTML/DOM elements. When the input is focused and after that changes position in the DOM tree, it loses that focus. Therefore you need to wait for the page to load and then set the focus. A small tweak is to force the select of the input so that you can be absolutely sure the cursor will appear. Here is a sample implementation for your case:

function pageLoad()

{

$get("login").focus();

$get("login").select();

}

Just replace your call to the focus method with this javascript snippet and you are good to go.

Hope this helps.

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

Reply