This is a migrated thread and some comments may be shown as answers.

textbox in radgrid can't focus while AllowKeyboardNavigation = true

1 Answer 38 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Emily Fong
Top achievements
Rank 1
Emily Fong asked on 23 Aug 2012, 10:24 AM

Hi,

I have a radgrid with edit mode = custom edit form in asp.net page.  There are several asp textbox in the FormTemplate. 
I follow the sample in http://www.telerik.com/help/aspnet-ajax/grid-set-focus-on-textboxes-in-edit-control.html to set one of the textbox focus when itemcreated.  However, I found that this the script did not work when I set AllowKeyboardNavigation = true in client setting.  If I set AllowKeyboardNavigation  = false, the textbox can get the foucs when I edit the row.
Below is my coding for the FormTemplate and ClientSetting

<EditFormSettings EditFormType="Template" >  
                   <EditColumn UniqueName="EditColumn" AutoPostBackOnFilter="true"></EditColumn>                     
                   <FormTemplate>
                       <asp:Table ID="EditTable" runat="server" cellspacing="0" cellpadding="0" BorderStyle=None>
                           <asp:TableRow>
                               <asp:TableCell>
                                   <asp:Label ID="lblOrgCode" runat="server" Text="Org. Code" ></asp:Label>
                               </asp:TableCell>
                               <asp:TableCell>
                                   <asp:TextBox ID="txtOrgCode" Text='<%# Bind("OrgCode") %>' runat="server" CssClass="uppercase" TabIndex="1" Readonly='<%#IIf(TypeOf(Container) is GridEditFormInsertItem,"false","true")%>' ></asp:TextBox>
                               </asp:TableCell>
                               <asp:TableCell></asp:TableCell>
                               <asp:TableCell>
                                   <asp:RequiredFieldValidator ID="RequiredFieldValidator1" Runat="server" Display="Dynamic"
                                       ControlToValidate="txtOrgCode" ForeColor="Red"
                                       ErrorMessage="Organization code can not be empty!">
                                   </asp:RequiredFieldValidator>
                                   <asp:CustomValidator ID="CustomValidator1" runat="server" Display="Dynamic"
                                       ControlToValidate="txtOrgCode" ForeColor="Red" OnServerValidate="OrgCode_ServerValidate"
                                       ErrorMessage="Org. code must be less than 100 characters">
                                   </asp:CustomValidator>
                               </asp:TableCell>
                           </asp:TableRow>
                           <asp:TableRow>
                               <asp:TableCell>
                                   <asp:Label ID="lblOrgName" runat="server" Text="Org. Name" ></asp:Label>
                               </asp:TableCell>
                               <asp:TableCell>
                                   <asp:TextBox ID="txtOrgName" Text='<%# Bind("OrgName") %>' runat="server" TabIndex="2" ></asp:TextBox>
                               </asp:TableCell>
                               <asp:TableCell></asp:TableCell>
                               <asp:TableCell>
                                   <asp:RequiredFieldValidator ID="RequiredFieldValidator2" Runat="server" Display="Dynamic"
                                       ControlToValidate="txtOrgName" ForeColor="Red"
                                       ErrorMessage="Organization name can not be empty!">
                                   </asp:RequiredFieldValidator>
                                   <asp:CustomValidator ID="CustomValidator2" runat="server" Display="Dynamic"
                                       ControlToValidate="txtOrgName" ForeColor="Red" OnServerValidate="OrgName_ServerValidate"
                                       ErrorMessage="Org. name must be less than 100 characters">
                                   </asp:CustomValidator>
                               </asp:TableCell>
                           </asp:TableRow>
                           <asp:TableRow>
                               <asp:TableCell>
                                   Creation Date
                               </asp:TableCell>
                               <asp:TableCell>
                                   <asp:TextBox ID="txtCreationDate" Text='<%# Bind("CreationDate") %>' runat="server" ReadOnly="true"> 
                                   </asp:TextBox>
                               </asp:TableCell>
                               <asp:TableCell>
                                     By   
                               </asp:TableCell>
                               <asp:TableCell>
                                   <asp:TextBox ID="txtCreationUser" runat="server" Text='<%# Bind("CreationUser") %>' ReadOnly="true"> 
                                   </asp:TextBox>
                               </asp:TableCell>
                           </asp:TableRow>
                           <asp:TableRow>
                               <asp:TableCell>
                                   Last Change Date   
                               </asp:TableCell>
                               <asp:TableCell>
                                   <asp:TextBox ID="txtLastChangeDate" Text='<%# Bind("LastChangeDate") %>' runat="server" ReadOnly="true"> 
                                   </asp:TextBox>
                               </asp:TableCell>
                               <asp:TableCell>
                                     By   
                               </asp:TableCell>
                               <asp:TableCell>
                                   <asp:TextBox ID="txtLastChangeUser" runat="server" Text='<%# Bind("LastChangeUser") %>' ReadOnly="true"> 
                                   </asp:TextBox>
                               </asp:TableCell>
                           </asp:TableRow>
                       </asp:Table>
                       <asp:Table runat="server">
                           <asp:TableRow>
                               <asp:TableCell HorizontalAlign=Left
                                   <asp:Button ID="Button1" Text='<%#IIf(TypeOf(Container) is GridEditFormInsertItem,"Insert","Update")%>' runat="server" CommandName='<%#IIf(TypeOf(Container) is GridEditFormInsertItem,"PerformInsert","Update")%>' TabIndex="3"> </asp:Button
                                   <asp:Button ID="Button2" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel" TabIndex="4"></asp:Button>
                               </asp:TableCell>
                           </asp:TableRow>
                       </asp:Table>
                   </FormTemplate>
               </EditFormSettings>
           </MasterTableView>
           <ClientSettings ReorderColumnsOnClient="True"  AllowColumnsReorder="True" AllowKeyboardNavigation="true" >
               <Selecting AllowRowSelect="True"></Selecting>
               <KeyboardNavigationSettings AllowSubmitOnEnter="true" EnableKeyboardShortcuts="true" AllowActiveRowCycle="true" CollapseDetailTableKey="LeftArrow" ExpandDetailTableKey="RightArrow" />                  
           </ClientSettings>

Below is my coding in setting the textbox focus on ItemCreated event.

If e.Item.IsInEditMode Then
                If TypeOf (e.Item) Is GridEditFormInsertItem Then
                    ControlToFocus = DirectCast(DirectCast(e.Item, GridEditableItem).FindControl("txtOrgCode"), TextBox)
                Else
                    ' Dim lGridEditableItem As GridEditableItem = DirectCast(e.Item, GridEditableItem)
                    ControlToFocus = DirectCast(DirectCast(e.Item, GridEditableItem).FindControl("txtOrgName"), TextBox)
                End If
            End If
 
            If Not ControlToFocus Is Nothing Then
                Dim script As String = [String].Format("$get('{0}').focus(); $get('{0}').select();", ControlToFocus.ClientID)
                RadScriptManager.RegisterStartupScript(Page, GetType(Page), "EditFocusScript", script, True)
 
            End If

Thanks!

1 Answer, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 28 Aug 2012, 11:51 AM
Hi Emily,

This happens because when the grid has enabled keyboard navigation it focuses itself or the first editable field in the edit item for easier navigation.
You can use a setTimeout inside the script that you register for focusing the control, to make it focus a bit later, after the grid itself has focused. As a result in the end the TextBox will remain in focus.

Regards,
Vasil
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Emily Fong
Top achievements
Rank 1
Answers by
Vasil
Telerik team
Share this question
or