Set Cursor Position on a RAD Controls

[Joselito]

How do you set cursor position on RadDateInput, RadEditor, textbox Inside RadGrid, all RAD Controls.
Especially if the rad control is built in .ascx  and added to the aspx.
I try to set focus and tabindex but they dont really work well. Using rad control cursor doesnt even blink.
What is the best way to set the cursor on a first editable control. Is it better in Javascript or in page load event inside cs file?
Please help and provide a sample code.

[Mira]

Hello Joselito,

I have followed your scenario and prepared a sample project for you. It shows how to focus and select a textbox in a usercontrol, which is the grid's edit form.

Please take a look at it and tell me whether it helps you.

All the best,
Mira
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Joselito]

Im trying to set the cursor position on the first load of the page on the first control radTestDate. I use .focus() in both c# and javascript but it never work. it doesnt select all the value of the date and it doesnt set the focus on this control. Is it because the control is hidden?  see below code. Can you give me a code to make it work.
What Im trying to do is at page load the value should be selected and focus on radTestDate control so that I can just go tab, tab tab on other controls without using tabindex. but at page load the URL of the page is the one selected if you use tab. please help.

runtime HTML:
        <td>
            <div id="ctl00_PlaceHolderMain_radTestDate_wrapper" class="pickerWrapper_Default " RadDatePickerType="Default" style="display:inline;zoom:1;width:150px;">
   <input id="ctl00_PlaceHolderMain_radTestDate" style="visibility: hidden;display:block; float:right;margin:0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" name="ctl00$PlaceHolderMain$radTestDate" type="text" value="2010-01-21" />
   <table cellpadding="0" cellspacing="0" style="border-width:0;border-collapse:collapse;width:100%;">
  <tr>
   <td class="inputCell" style="width:100%;">
    <span id="ctl00_PlaceHolderMain_radTestDate_dateInput_wrapper" class="radInput_Default" style="display:block;">
     <input type="text" value="1/21/2010" id="ctl00_PlaceHolderMain_radTestDate_dateInput_text" name="ctl00_PlaceHolderMain_radTestDate_dateInput_text" class="radEnabledCss_Default" style="width:100%;" />
     <input style="visibility:hidden;float:right;margin:-18px 0 0 0;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_PlaceHolderMain_radTestDate_dateInput" name="ctl00$PlaceHolderMain$radTestDate$dateInput" type="text" class="rdfd_" value="2010-01-21-00-00-00" />
     <input id="ctl00_PlaceHolderMain_radTestDate_dateInput_ClientState" name="ctl00_PlaceHolderMain_radTestDate_dateInput_ClientState" type="hidden" />
    </span>
   </td>

to make this page work. add reference system.web.extension
=============
.ASPX page

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" MasterPageFile="application.master" Inherits="ASPNET.WebForm" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="Telerik.Web.UI, Version=2008.2.1001.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Main" contentplaceholderid="PlaceHolderMain" runat="server">
<script type="text/javascript">

</script>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>
            <telerik:RadDatePicker ID="radTestDate" DateInput-SelectionOnFocus="SelectAll" RadDatePickerType="Default" runat="server">

            </telerik:RadDatePicker>
        </td>
    </tr>
    <tr>
        <td>
            <asp:TextBox ID="txtName" runat="server" onkeydown="TestKey(event,2);"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <asp:TextBox ID="txtNumber" runat="server" onkeyup="TestKey(event,1);"></asp:TextBox>
        </td>
 </tr>
 <tr>
     <td>
         <asp:TextBox ID="txtCode" runat="server"></asp:TextBox>
     </td>
 </tr>
</table>
</asp:Content>

 

 application.master

<%@Master language="C#"%>
<html  runat="server">
<HEAD runat="server">
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <META HTTP-EQUIV="Expires" content="0">
</HEAD>
<BODY scroll="yes">
  <form runat="server">
  <TABLE class="ms-main" CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH="100%" HEIGHT="100%">
    <tr>
             <td valign="top" height="100%">
               <A name="mainContent"></A>
                <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">
                </asp:ContentPlaceHolder>
             </td>
    </tr>
  </TABLE>
  </form>
</BODY>
</html>

 

 

 

 

 

 

 

 

 

 

[Mira]

Hello Joselito,

I have followed your scenario and prepared a sample project for you showing how to focus the date input of a RadDatePicker.

I hope you find it useful.

Regards,
Mira
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Joselito]

Thanks for your reply. My web.config in my previous sample is not configured with ajax thats why its not working. RadDatePicker is now setting focus so its good but when you add a RadEditor, RadDatePicker loss its focus again. Im not sure if adding with other RAD controls will not work also. try adding RadEditor with the attached sample and please send me the code if you make it work. Thanks.

[Joselito]

I test with the other rad controls and only adding radeditor that make not working.

[Iana Tsolova]

Hi Joselito,

What the editor actually do is similar to (but not exactly the same as) taking the focus. The editor just gets the page selection in order to properly attach its event handlers to its content area. For unknown reason (looks like an IE bug or shortfall of the implementation) keyboard handlers would not properly attach, and the editor uses additional code to get the selection.

In order to overcome this issue, you can try handling the RadEditor OnClientLoad client-side event and set the focus of the RadDatePicker there. Please find attached the modified sample illustrating the upper solution.

All the best,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Joselito]

Thanks a lot its working now.
Im setting the onclientload in radedit control on the aspx page but it didnt work. It only work in the code behind.

[Joselito]

How to set focus on the textbox of a radgrid on edit and display mode. see the attached image how grid look like.
I want to set focus on customer_name textbox on the first row all the time when grid is loaded.
The grid is inside the .ascx file and used in the .aspx page. sccsearchcontrol is in another .ascx file.
Im using the code below but I always get null value, it can't find it.

protected void gridCustomer_ItemCreated(object sender, GridItemEventArgs e)
{

if (e.Item is GridDataItem)
{

    GridEditableItem item = (GridEditableItem)e.Item;

    (item.FindControl("Customer_Name") as TextBox).Focus();



}
}

I also put a code in ItemDatabound but it doesnt work

protected void gridCustomer_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
     {
         GridDataItem editedItem = e.Item as GridDataItem;
     string customerValue=editedItem["Customer_Name"].Text; //this work you I get the value of customer name
     editedItem["Customer_Name"].Focus(); //doesnt work












     }
}

<Telerik:RadGrid ID="gridCustomer"    GridLines="None" Skin="Office2007"  AlternatingItemStyle-BackColor="WhiteSmoke" />








    <Columns>



         <ItemTemplate>
         <asp:TextBox ID="txtRoleDescription" runat="server" MaxLength="256"  Width="200px"  CssClass="formHeaderField" Text='<%#  DataBinder.Eval(Container.DataItem, "Role_Description") %>'    />&nbsp;



         </ItemTemplate>
        </Telerik:GridTemplateColumn>
        <Telerik:GridButtonColumn    UniqueName="BlankButtonColumn" HeaderText=""  Display="false" ItemStyle-Width="0%"/>

        <ItemTemplate>
         <asp:Label ID="lblCustomer" runat="server"  text="Name:"/>








        </ItemTemplate>
        </Telerik:GridTemplateColumn>
    </Columns>
       <DetailTables>





            <Columns>
            <Telerik:GridTemplateColumn>
            </Telerik:GridTemplateColumn>


            </Columns>
        </Telerik:GridTableView>
        </DetailTables>
    </MasterTableView>
</Telerik:RadGrid>

//SCCSearchControl.ascx:
<div id="divmMain">
<asp:Label ID="lblCustomerNumber"  CssClass="formHeaderField" runat="server" Style="text-align: right" Width="75px" ></asp:Label>&nbsp;
<asp:TextBox ID="txtObjectName"  CssClass="formHeaderField" runat="server" MaxLength="120" Width="200px" ></asp:TextBox>
</div>

[Joselito]

I tried in ItemDataBound and ItemCreated event but both dont work.
There is also a radeditor at the bottom of the page which is the last radcontrol.

[Joselito]

I also have A.aspx that has B.ascx file. In the  B.ascx it has a radeditor and has another ascx (C.ascx). In C.ascx has an "<asp:FileUpload>" control and <asp:Textbox> control. Im trying to set focus on the textbox control in C.ascx but I cannot make it work because of the radeditor.

[Joselito]

Please help me also in How to set focus on the textbox of a radgrid on edit and display mode. Please see my previous post. Thanks.

[Iana Tsolova]

Hello Joselito,

Would be convenient for you to send me a sample project illustrating your scenario and setup? Thus I will be able to debug it locally and see what could have gone wrong with the textbox focusing.

All the best,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Joselito]

for the radgrid I posted a sample code on January 27 right below your previous response on January 27. Thanks.

[Joselito]

For the Document upload below are the code.
Im setting the focus on fupUploadDocument control but it doesnt work.
document.aspx has permdocument.ascx and permdocument.ascx  has documentupload.ascx and radeditor.
DocumentUpload.ascx.cs

public void SetFocusToFirstControl()

{

}

(DocumentUpload.ascx)

<script type="text/javascript">
    function SetFileUploadFocus()
    {


    }
</script>
<fieldset>
    <legend class="legendheader"><asp:Label ID="lblLegendHeader" runat="server">Upload Documents</asp:Label></legend>
    <asp:UpdatePanel ID="updatePanelMain" runat="server">
    <ContentTemplate>
    <table class="ms-formtable" style="margin-top: 8px;" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>
                <div id="divUploadDocument" runat="server" style="width:100%">
                    <table>
                        <tr>
                            <td colspan="2">
                                <img src="/_layouts/images/blank.gif" border="0" height="1" width="175" alt=""/>
                            </td>
                        </tr>
                        <tr>
                            <td class="ms-formlabel" style="width:10%; height: 24px;">
                                File:
                            </td>
                            <td class="ms-formbody" style="height: 24px">
                                <asp:FileUpload ID="fupUploadDocument" runat="server" Width="60%" />
                            </td>
                        </tr>
                        <tr>
                            <td class="ms-formlabel">
                                Document Name:
                            </td>
                            <td class="ms-formbody">
                                <asp:TextBox ID="txtDocumentName" runat="server" Width="60%"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="ms-formlabel" style="width:10%; height: 24px;">
                                 Type:
                            </td>
                            <td class="ms-formbody" >


                                <asp:CheckBox ID="chkAddExistingVersion" runat="server" Text="Add as a new version to existing files" />
                            </td>
                        </tr>
                    </table>
               </div>
            </td>
        </tr>
    </table>
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="btnUpload" />
    </Triggers>
    </asp:UpdatePanel>
</fieldset>

PermDocument.ascx.cs

[System.Web.Services.

WebMethod]

 

 

 

public static void SetControlFocus()

 

 

 {

    documentUpload.SetFocusToFirstControl();

}

 

 

 

 

 

PermDocument.ascx

function CallControlFocus() {    }   <div class="contentdiv">


</div>

<div class="contentdiv">

</div>


<div class="contentdiv">

</div>


<div class="contentdiv">




            <table class="ms-formtable" style="margin-top: 8px;" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td class="ms-formbody">

                    </td>
                </tr>
            </table>


</div>

Document.aspx

<script type="text/javascript">
</script>



<div class="masterdiv">


    <div id="divMain">

     </div>


</div>

[Iana Tsolova]

Hello Joselito,

Please find attached a sample project and try it on your end. Let me know if it works as desired and if I missed something from your logic out.

All the best,
Iana
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Joselito]

thanks a lot, your code help me to set focus on any control inside the grid.