RadButton - Trouble with Keyboard Navigation when Enter Key is pressed

2 posts, 0 answers
  1. José
    José avatar
    3 posts
    Member since:
    Feb 2014

    Posted 02 Jul 2014 Link to this post

    Hi,
    I'm using UI for ASP.NET AJAX Q2 2014  2014.2.618.45 let me describe my problem:
    I'm using a RadGrid with FormTemplate and 2 buttons, one for Insert or Update (I'm usig CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>') and one for Cancel; If I'm in insert mode and if  I press the TAB key to select the Save button and then I press the Enter Key, it is working fine but, when I'm in Update mode  and if  I press the TAB key to select the Save button and then I press the Enter Key, the Update button events never fires. It's is happening only for the Save button becouse if I select the Cancel button works fine.

    I´m attaching my aspx code  for a better idea of what I'm describing

    I hope you can help me.

    Regards,
    José Zamarrón

    <%@ Page Title="" Language="C#" MasterPageFile="~/masterSRR.Master" AutoEventWireup="true" CodeBehind="rancho.aspx.cs" Inherits="SRRUI2.Catalogos.rancho" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
     
     
    <asp:Content ID="Content1" ContentPlaceHolderID="cphScriptsCss" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="cphFiltros" runat="Server">
        <table style="width: 100%">
            <tr>
                <td rowspan="3">
                    <asp:Panel ID="Panel5" runat="server" BackColor="Transparent" Style="float: left;">
                        <asp:Image ID="Image1" ImageUrl="~/Imagenes/titulo-ranchos.png"
                            runat="server" />
                    </asp:Panel>
                </td>
                <td colspan="5" style="text-align: right"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
               
                <td></td>
                <td style="text-align: left; width: 210px">
                
                     <asp:Label ID="lblFitrarActivo" runat="server" Text="FILTRAR POR:" CssClass="MyLabel"></asp:Label><br />
                    <telerik:RadComboBox ID="cmbFiltroActivo" runat="server" Skin="Windows7">
                        <Items>
                            <telerik:RadComboBoxItem Text="TODOS" Value="-1" />
                            <telerik:RadComboBoxItem Text="ACTIVO" Value="1" Selected="true" />
                            <telerik:RadComboBoxItem Text="INACTIVO" Value="0" />
                        </Items>
                    </telerik:RadComboBox>
                </td>
                <td style="text-align: left; width: 210px">
                
                     <asp:Label ID="lblBusqueda" runat="server" Text="BÚSQUEDA:" CssClass="MyLabel"></asp:Label><br />
                     <telerik:RadSearchBox runat="server" ID="rdsFiltro"  onKeyPress="return EvitaCaracteres(event)" onpaste="return false"
                        CssClass="MyWrapper" Skin="Windows7" Width="210" DropDownSettings-Height="300"
                        DataTextField="nombre" EmptyMessage="NOMBRE"  EnableAutoComplete="false"
                        Filter="Contains" OnSearch="rdsFiltro_Search">
                     </telerik:RadSearchBox>
            
                </td>
            </tr>
        </table>
    </asp:Content>
        
    <asp:Content ID="Content3" ContentPlaceHolderID="cphContenido" runat="server">
        <div>           
            <telerik:RadAjaxPanel runat="server" ID="rApnl" Width="100%" ClientEvents-OnRequestStart="onRequestStart" LoadingPanelID="radLoaginPlanel" Culture="es-MX" >
     
            <telerik:RadGrid ID="gridRancho" runat="server" AllowPaging="true" Skin="Windows7" AllowSorting="true" Culture="es-MX"
                                OnNeedDataSource="gridRancho_NeedDataSource"
                                OnDeleteCommand="gridRancho_DeleteCommand"
                                OnInsertCommand="gridRancho_InsertCommand"
                                OnUnload="gridRancho_Unload"
                                OnUpdateCommand="gridRancho_UpdateCommand"
                                OnItemCommand="gridRancho_ItemCommand"
                                OnItemDataBound="gridRancho_ItemDataBound" OnItemCreated="gridRancho_ItemCreated">
     
                                <MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="false" DataKeyNames="id_rancho"
                                    InsertItemPageIndexAction="ShowItemOnCurrentPage">
                                    <PagerStyle Mode="NextPrevAndNumeric" PagerTextFormat="{4} Registro {2} a {3} de {5}" PageSizeLabelText="Tamaño por página" />
                                    <NoRecordsTemplate>
                                        <table width="100%" border="0">
                                            <tr>
                                                <td align="center">
                                                    <h3 style="color: Red">NO SE ENCONTRÓ INFORMACIÓN</h3>
                                                </td>
                                            </tr>
                                        </table>
                                    </NoRecordsTemplate>
                                    <Columns>
                                        <telerik:GridBoundColumn DataField="id_rancho" UniqueName="id_rancho" HeaderText="ID"  Visible="false" ReadOnly="True">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="nombre" UniqueName="nombre" HeaderText="NOMBRE">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="propietario" UniqueName="propietario" HeaderText="PROPIETARIO">
                                        </telerik:GridBoundColumn>
                                         <telerik:GridBoundColumn DataField="zona" UniqueName="zona" HeaderText="IdZona" Visible="false">
                                        </telerik:GridBoundColumn>
                                         <telerik:GridBoundColumn DataField="descZona" UniqueName="descZona" HeaderText="ZONA">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="activo" UniqueName="activo" HeaderText="Activo" Visible="false">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderText="EDITAR" UpdateImageUrl="~/Imagenes/editar.png" Exportable="false" UniqueName="EditColumn"></telerik:GridEditCommandColumn>
                                        <telerik:GridButtonColumn ConfirmText="¿ESTÁ SEGURO QUE DESEA ELIMINAR EL RANCHO SELECCIONADO?" ButtonType="ImageButton" Exportable="false" ButtonCssClass="item_permisos" ImageUrl="~/Imagenes/eliminarRegistro.png" 
                                            CommandName="Delete" Text="Eliminar" UniqueName="DeleteColumn" HeaderText="ELIMINAR">
                                        </telerik:GridButtonColumn>
                                    </Columns>
                                    <EditFormSettings InsertCaption="Agregar Nuevo Rancho" CaptionFormatString="Esta editando el rancho con ID: {0}" CaptionDataField="id_rancho" EditFormType="Template">
                                        <EditColumn FilterControlAltText="Filter EditCommandColumn1 column" UniqueName="EditCommandColumn1">
                                        </EditColumn>
                                        <FormTemplate>
                                          <table class="medio">
                                               <tr>
                                                   <td class="celdaNameTamanio">
                                                            NOMBRE:
                                                   </td>
                                                   <td class="celdaDatosTamanio">  
                                                       <telerik:RadTextBox ID="txtNombre" Width="250" Skin="Windows7" MaxLength="60" CssClass="upper" onpaste="return false" onKeyPress="return EvitaCaracteres(event)" onKeyUp="changeCase(this)" runat="server"
                                                            EmptyMessage="" Text='<%# Bind("nombre") %>'>
                                                       </telerik:RadTextBox>
                                                       <asp:RequiredFieldValidator ID="rfvTxtNombre" ForeColor="Red" runat="server" ErrorMessage='<%#SRRUI2.Helpers.ModalView.MensajeCampoRequerido %>' Display="Dynamic" ControlToValidate="txtNombre"></asp:RequiredFieldValidator>
                                                   </td>
                                               </tr>
                                              <tr>
                                                  <td class="celdaNameTamanio">
                                                      PROPIETARIO:
                                                  </td>
                                                  <td class="celdaDatosTamanio">   <telerik:RadTextBox ID="txtPropietario" Width="250" Skin="Windows7" MaxLength="60" CssClass="upper" onpaste="return false" onKeyUp="changeCase(this)" onKeyPress="return EvitaCaracteres(event)" runat="server"
                                                            EmptyMessage="" Text='<%# Bind("propietario") %>'>
                                                        </telerik:RadTextBox>
                                                  </td>
                                              </tr>
                                              <tr>
                                                  <td class="celdaNameTamanio">
                                                      ZONA:
                                                  </td>
                                                  <td class="celdaDatosTamanio">  
                                                        <telerik:RadComboBox ID="cmbZona" Width="250" runat="server" Skin="Windows7" SelectedValue='<%# Bind("zona") %>' AppendDataBoundItems="True">
                                                            <Items>
                                                                <telerik:RadComboBoxItem Text="CENTRO" Value="1" />
                                                                <telerik:RadComboBoxItem Text="SUR" Value="2" />
                                                            </Items>
                                                        </telerik:RadComboBox>
                                                  </td>
                                              </tr>
                                              <tr>
                                                  <td class="celdaNameTamanio">
                                                      ESTADO:
                                                  </td>
                                                  <td class="celdaDatosTamanio"
                                                        <telerik:RadComboBox ID="cmbActivo" Width="250" runat="server" Skin="Windows7" SelectedValue='<%# Bind("activo") %>' AppendDataBoundItems="True">
                                                            <Items>
                                                                <telerik:RadComboBoxItem Text="ACTIVO" Value="1" />
                                                                <telerik:RadComboBoxItem Text="INACTIVO" Value="0" />
                                                            </Items>
                                                        </telerik:RadComboBox>
                                                  </td>
     
                                              </tr>
                                                <tr>
                                                    <td style="text-align: right; width: 50%"></td>
                                                    <td style="text-align: left">
     
                                                      <telerik:RadButton ID="bntGuardar" runat="server" Text="Guardar" Skin="Windows7"
                                                            CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                                                            <Icon SecondaryIconCssClass="rbSave" SecondaryIconRight="4" SecondaryIconTop="4"></Icon>
                                                        </telerik:RadButton>   
                                                          
                                                                <telerik:RadButton ID="bntCancelar" runat="server" Text="Cancelar" Skin="Windows7" CausesValidation="False"
                                                                    CommandName="Cancel">
                                                                    <Icon SecondaryIconCssClass="rbCancel" SecondaryIconRight="4" SecondaryIconTop="4"></Icon>
                                                                </telerik:RadButton>
                                                    </td>
                                                    </tr>
     
                                           </table>
                                        </FormTemplate>
                                    </EditFormSettings>
                                    <ExpandCollapseColumn Visible="False">
                                        <HeaderStyle Width="19px"></HeaderStyle>
                                    </ExpandCollapseColumn>
                                    <CommandItemSettings AddNewRecordText="Agregar Nuevo Rancho" ShowExportToExcelButton="true" />
                                    <RowIndicatorColumn Visible="False">
                                        <HeaderStyle Width="20px" />
                                    </RowIndicatorColumn>
                                </MasterTableView>
                                <ExportSettings ExportOnlyData="True" FileName="RANCHO"  IgnorePaging="True">
                                </ExportSettings>
                                <ClientSettings>
                                    <Selecting AllowRowSelect="true" />
                                </ClientSettings>
                            </telerik:RadGrid>
                        <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none;" />
                        <asp:ModalPopupExtender ID="programmaticModalPopup" runat="server" BehaviorID="programmaticModalPopupBehavior"
                            TargetControlID="hiddenTargetControlForModalPopup" PopupControlID="programmaticPopup"
                            BackgroundCssClass="modalBackground" RepositionMode="RepositionOnWindowScroll"
                            OkControlID="bntok">
                        </asp:ModalPopupExtender>
     
                        <asp:Panel runat="server" CssClass="modalPopupatencion" ID="programmaticPopup" Style="width: 388px; height: 215px; text-align: center; color: white">
                            <asp:Panel runat="Server" ID="programmaticPopupDragHandle" Style="cursor: move; height: 45px; text-align: center;"
                                Height="42px">
                                <br />
                                Aviso del Sistema
                            </asp:Panel>
                            <table>
                                <tr>
                                    <td style="width: 130px; height: 133px;">   
                                    </td>
                                    <td style="height: 133px">
                                        <asp:Label ID="lblmsg" CssClass="mensaje" runat="server"></asp:Label>
                                            
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <asp:ImageButton ID="bntok" runat="server" CausesValidation="false" ImageUrl="~/Imagenes/boton-aceptarI.png" />
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
     
                   </telerik:RadAjaxPanel>
             
                        <telerik:RadAjaxLoadingPanel ID="radLoaginPlanel" IsSticky="true" runat="server" Skin="" Transparency="30">
                            <div id="loading">
                                <div>
                                    <p>
                                        Cargando
                                    </p>
                                    <span>Espere Por favor, se esta procesando su solicitud...</span>
                                </div>
                            </div>
                        </telerik:RadAjaxLoadingPanel>
     
        </div>
        <script type="text/javascript">
            function onRequestStart(sender, args) {
                if (args.get_eventTarget().indexOf("ExportTo") >= 0) {
                    args.set_enableAjax(false);
                }
            }
        </script>
    </asp:Content>

  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 07 Jul 2014 Link to this post

    Hi José,

    I tried to reproduce the problem but to no avail.
    • Under which browser and its version the problem occurs?
    • Are there any JavaScript errors thrown on the page? If so, could you please provide the exact error messages?
    • Could you please open a formal support ticket and provide sample fully runnable project so we can examine and debug it locally?

    Due to the fact that nether a dummy data source, not any server-side event handler, nor the master page I used simplified RadGrid for testing purposes. Could you please examine and modify the attached sample page until the problem occurs and send it back?

    Regards,
    Dobromir
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top