locked
ASP.net Gridview link button only triggered on mouse click but not Enter key RRS feed

  • Question

  • User-753919028 posted

    I am upgrading my ASP.net forms code to be A11Y Digitally accessible So:

    I have a GridView on a form page with dynamically created link buttons on it, and they are tabbing correctly.

    When I mouse click on any link button, the correct new page appears, but when I press ENTER to select a link button when I tab to it, Enter does not work.

    How do I , make ENTER behave like a left mouse click on the GridView when I tab to the link button?

    Thanks in anticipation for any help.

    Sunday, November 8, 2020 11:15 PM

Answers

  • User-1330468790 posted

    Hi carrolls,

     

    Sorry that I could not reproduce your problem when I tested with a simplified code.

    You could try below codes to see if the codes cannot work from your side.

    aspx:

    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <table style="width: 100%; height: 91px;">
    
            <tr>
    
                <td style="width: 75px; height: 91px;"></td>
    
                <td style="width: 800px; height: 91px;">
    
    
    
                    <div  style="background: white; border-color: #7f9db9; border-width: 1px;">
    
    
    
                        <asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="False"
                            CellPadding="1" ForeColor="#333333" GridLines="Both" Width="800px">
    
    
                            <Columns>
    
                                <asp:TemplateColumn HeaderText="Action" HeaderStyle-Width="30" HeaderStyle-Font-Size="8">
    
                                    <ItemTemplate>
    
                                        <asp:LinkButton ID="EditButton" runat="server" Text='<%# Eval("Action") %>' Width="30" HeaderStyle-HorizontAlalign="Left" OnClick="Edit">
    
                                        </asp:LinkButton>
                                    </ItemTemplate>
                                    <HeaderStyle Width="50px"></HeaderStyle>
    
                                </asp:TemplateColumn>
    
    
    
                                <asp:BoundColumn DataField="ReferralsReassignID" HeaderText="ID" HeaderStyle-Width="1" Visible="true" HeaderStyle-Font-Size="8" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
    
                                    <HeaderStyle Font-Size="8pt" Width="200px"></HeaderStyle>
    
                                </asp:BoundColumn>
    
    
                            </Columns>
    
                            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    
                            <EditItemStyle BackColor="#2461BF" />
    
                            <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    
                            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    
                            <AlternatingItemStyle BackColor="White" />
    
                            <ItemStyle BackColor="#EFF3FB" />
    
                            <HeaderStyle BackColor="#0000CC" Font-Bold="True" ForeColor="White" />
    
                        </asp:DataGrid>
    
                        <asp:Panel ID="pnlAddEdit" runat="server" CssClass="modalPopup" style = "display:none">
                            <asp:Label Font-Bold="true" ID="TitleLabel" runat="server" Text="Temporary Coverage ID:"></asp:Label>
    
                            <asp:Label Font-Bold="true" Font-Underline="true" ID="lblTempCoverageID" runat="server" Text="123"></asp:Label>
                            
                        <asp:Button ID="ButtonYes" runat="server" OnClick="ButtonYes_Click" Text="Yes" />
    
                        </asp:Panel>
    
                        <asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
    
    
                        <ajaxToolkit:ModalPopupExtender ID="popup" runat="server" PopupControlID="pnlAddEdit"
                            Enabled="true" BackgroundCssClass="#FFFFFF"
                            TargetControlID="lnkFake">
                        </ajaxToolkit:ModalPopupExtender>
    
                    </div>
    
                </td>
    
                <td style="width: 65px; height: 91px;"></td>
    
                <td style="height: 91px"></td>
    
            </tr>
    
        </table>
    </asp:Content>

    Code behind: with a simulation of data

    Private Shared _gridviewDT As DataTable
    
        Public Shared Property GridviewDT As DataTable
            Get
    
                If _gridviewDT Is Nothing Then
                    _gridviewDT = New DataTable()
                    _gridviewDT.Columns.Add("ReferralsReassignID", GetType(Integer))
                    _gridviewDT.Columns.Add("Action", GetType(String))
                    _gridviewDT.Rows.Add(1, "name1")
                    _gridviewDT.Rows.Add(2, "name2")
                    _gridviewDT.Rows.Add(3, "name3")
                    _gridviewDT.Rows.Add(4, "name4")
                    _gridviewDT.Rows.Add(5, "name5")
                End If
    
                Return _gridviewDT
            End Get
            Set(ByVal value As DataTable)
                _gridviewDT = value
            End Set
        End Property
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                DataGrid1.DataSource = GridviewDT
                DataGrid1.DataBind()
            End If
        End Sub
    
        Protected Sub Edit(ByVal sender As Object, ByVal e As EventArgs)
            popup.Show()
        End Sub
    
        Protected Sub ButtonYes_Click(ByVal sender As Object, ByVal e As EventArgs)
            popup.Hide()
        End Sub

    Demo:

     

    Here are some guesses from JQuery side:

    • The JQuery conflicts: Could you please make sure that only one JQuery file is working in your project?
    • The JQuery could not handle the key event for enter key: Could you please try to use another stable version of JQuery

      

    I suggest you could try to use javascript native function to see if it is able to make key event working on anchor element:

    <script>
            // Get the EditButton since the id will always contain the server side id.
            document.querySelector('[id *= EditButton]').addEventListener("keydown", TriggerLink, false);
    
            function TriggerLink(e) {
                if (!e) e = window.event;
                var keyCode = e.keyCode || e.which;
                // enter key code is 13 and you should see an alert with doPostBack function content
                if (keyCode == '13') {
                    alert("Triggered: " + this);
                    this.click();
                }
            }
        </script>

     

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 11, 2020 11:40 AM

All replies

  • User-1330468790 posted

    Hi carrolls,

     

    I was wondering if you could share some codes or a simple working demo for reproducing the problem.

    If you want to trigger a postback to the post back url associated with the link button, the 'Enter' key should be working.

     

    I suspect that you want to trigger the click event handler, which is not possible since the event handler does not know of the state or control that gave rise to the event. 

    By the way, dynamically adding controls to the page is not suggested. Instead, you might be interested in adding the controls and choosing hide or display it.

     

    If you insist on dynamically controls, you have to recreate the controls every time you trigger a postback and bind the event handler at that time.

    Then the event handler will be triggered.

     

    You could refer to below demo for more details.

    .aspx:

     <form id="form1" runat="server">
            <h3><asp:Label ID="DisplayLbl" runat="server"></asp:Label></h3>
            <div>
                <asp:Panel ID="buttonPanel" runat="server"></asp:Panel>
                <asp:TextBox ID="buttonId" runat="server"></asp:TextBox>
                <asp:Button ID="AddLink" runat="server" OnClick="AddLink_Click" Text="Add Link Button" />
                
            </div>
        </form>

    Code behind:

    public static List<LinkButton> links = new List<LinkButton>();
    
            protected void Page_Load(object sender, EventArgs e)
            {
                
                    foreach (var link in links)
                    {
                        // You could retrieve the link button but you should rebind event handler
                        link.Click += new EventHandler(AddedLink_Click);
                        buttonPanel.Controls.Add(link);
                    }
              
            }
    
    
            protected void AddLink_Click(object sender, EventArgs e)
            {
                AddLinkWithId(buttonId.Text);
            }
    
            protected void AddedLink_Click(object sender, EventArgs e)
            {
                DisplayLbl.Text = "Triggered";
            }
    
            private void AddLinkWithId(string buttonId)
            {
                LinkButton linkButton = new LinkButton();
                linkButton.ID = buttonId;
                linkButton.Text = buttonId;
                //linkButton.PostBackUrl = Server.MapPath("/Default.aspx");
                linkButton.Click += new EventHandler(AddedLink_Click);
    
                links.Add(linkButton);
                buttonPanel.Controls.Add(linkButton);
            }

    Demo:

     

    Hope helps.

    Best regards,

    Sean

    Monday, November 9, 2020 8:17 AM
  • User-753919028 posted

    Hi Sean, Thank you kindly for the comprehensive answer. I will show you a screenshot of the grid. 

    With the Add/Edit and Delete link buttons they work fine when I point the mouse over the button and left click the mouse button. The correct events are triggered.

    But when I tab to the Add/Edit and Delete buttons, I can select them as shown with the square box in the screenshot, but when I press ENTER when the particular button I want to select is tabbed to, nothing happens. I want the same event to be triggered on pressing ENTER as when I click the mouse over the button.

    Monday, November 9, 2020 3:33 PM
  • User-1330468790 posted

    Hi carrolls,

     

    Thank you for adding description about the problem. 

    Understand. 

     

    For reproducing the problem, could you please share two parts of information?

    1. Which browser do you use for developing? (version needed)
    2. Could you please show me the aspx page markup? I will fill it with some simulation data to reproduce the problem. If you find code behind codes necessary, please share them as well if convenient. 

     

    Best regards,

    Sean

    Tuesday, November 10, 2020 7:04 AM
  • User-753919028 posted

    Hi Sean, The Browser I am using is Chrome 86.0.4240.75 64 Bit. (But the same problem happens in Internet Explorer)

    When I click on Add or Edit, this server side code (VB.NET) is hit (Protected Sub Edit(ByVal sender As ObjectByVal e As EventArgs) ….Popup.Show())  it puts up a modal popup on the screen where I can add or Edit the particular row. Popup.Hide() closes the popup modal box. But I need to trigger Protected Sub Edit(ByVal sender As ObjectByVal e As EventArgs) using the Enter Key on tab focus.

    The Modal popup is displayed over the grid when a link button is clicked and it’s  markup is also contained within  the below code.

    Here is the markup

     

    <asp:Content ID="Content2" ContentPlaceHolderID="cphMain" runat="server">
    
     
    
        <script src="BupdaterStyle/Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
    
     
    
    </script>
    
     
    
     
    
       
    
        <table style="width: 100%">
    
            <tr>
    
                <td align="center" bgcolor="#0000CC" colspan="3">
    
                    <asp:Label ID="lbl_HeaderBU" runat="server" BackColor="#0000CC" ForeColor="White" Text="    Temporary Coverage    " Font-Bold="True" Font-Size="Large"></asp:Label>
    
                </td>
    
     
    
            </tr>
    
            <tr>
    
                <td>
    
                    &nbsp;</td>
    
                <td>
    
                    &nbsp;</td>
    
                  <td>
    
                      &nbsp;</td>
    
     
    
            </tr>
    
            <tr>
    
                <td align="right">
    
                    <asp:Label ID="lblSearchBySalesRep" runat="server" Text="Search By Sales Rep:" Font-Bold="True" AssociatedControlID="TextSearchBySalesRepName"></asp:Label>
    
     
    
                </td>
    
                <td align="left">
    
                    <asp:TextBox ID="TextSearchBySalesRepName" runat="server" Width="122px" ></asp:TextBox>
    
                                                  <cc1:AutoCompleteExtender
    
                                                  ID="AutoCompleteExtender1"
    
                                                  runat="server"
    
                                                  ServiceMethod="Get_SalesReps"
    
                                                  ServicePath="~/Web Services/LRTWebService.asmx"
    
                                                  MinimumPrefixLength="2"
    
                                                  CompletionInterval="100"
    
                                                  EnableCaching="false"
    
                                                  CompletionSetCount="10"
    
                                                  TargetControlID="TextSearchBySalesRepName"
    
                                                  FirstRowSelected="false"
    
                                                  CompletionListCssClass="autocomplete_completionListElement"
    
                                                  CompletionListItemCssClass="autocomplete_listItem" OnClientShown="PopupShown"
    
                                                  OnClientItemSelected="OnContactSelected1"
    
                                                  CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem">
    
                                                </cc1:AutoCompleteExtender>
    
                      <asp:Button ID="btnSalesRepNameSearch" runat="server" Text=" Search" />
    
                </td>
    
                  <td>
    
                      &nbsp;</td>
    
     
    
            </tr>
    
            <tr>
    
            <td style="width: 30%">
    
                    &nbsp;</td>
    
                <td colspan="2">
    
                <asp:UpdatePanel runat="server" ID="UpdatePanel2">
    
                           <ContentTemplate>
    
                    <asp:Label ID="LblErrorMsg" runat="server" Font-Bold="True" ForeColor="#B30000" Width="700px" ></asp:Label>
    
                    </ContentTemplate></asp:UpdatePanel>
    
                </td>
    
            </tr>
    
        </table>
    
     
    
        <div style="OVERFLOW: auto; HEIGHT: 427px">
    
     
    
              
    
            <table style="width: 100%; height: 91px;">
    
                <tr>
    
                    <td style="width: 75px; height: 91px;">
    
                        </td>
    
                    <td style="width: 800px; height: 91px;">
    
                                         
    
                    <div class="label" style="background: white; border-color: #7f9db9; border-width: 1px;">
    
                   
    
                    <asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="False"
    
                                CellPadding="1" ForeColor="#333333" GridLines="Both" Width="800px">
    
     
    
                      
    
                    <Columns>
    
                        <asp:TemplateColumn HeaderText="Action" HeaderStyle-Width="30"  HeaderStyle-Font-Size="8"  >
    
                            <ItemTemplate>
    
                                <asp:LinkButton ID="EditButton" runat="server" Text= '<%# Eval("Action") %>' Width="30" HeaderStyle-HorizontAlalign="Left" OnClick="Edit" >
    
                                   
    
                                </asp:LinkButton>
    
     
    
                            </ItemTemplate>
    
     
    
                            <HeaderStyle Width="50px"></HeaderStyle>
    
                        </asp:TemplateColumn>
    
                       
    
                        <asp:BoundColumn DataField="ReferralsReassignID" HeaderText="ID" HeaderStyle-Width="1" visible = "False" HeaderStyle-Font-Size="8" HeaderStyle-HorizontAlalign="Left" ItemStyle-HorizontalAlign="Left">                                      
    
                            <HeaderStyle Font-Size="8pt" Width="200px"></HeaderStyle>
    
                        </asp:BoundColumn>
    
                       
    
                        <asp:BoundColumn DataField="Sales Rep From" HeaderText="From Rep" HeaderStyle-Width="50" HeaderStyle-Font-Size="8" HeaderStyle-HorizontAlalign="Left" ItemStyle-HorizontalAlign="Left">
    
                            <HeaderStyle Font-Size="8pt" Width="50px"></HeaderStyle>
    
                        </asp:BoundColumn>
    
                                       
    
                        <asp:BoundColumn DataField="Sales Rep To" HeaderText="To Rep" HeaderStyle-Width="50" HeaderStyle-Font-Size="8" HeaderStyle-HorizontAlalign="left" ItemStyle-HorizontalAlign="Left">
    
                            <HeaderStyle Font-Size="8pt" Width="50px"></HeaderStyle>
    
                        </asp:BoundColumn>
    
                                                                                 
    
                        <asp:BoundColumn DataField="From Date" HeaderText="From Date" HeaderStyle-Width="50" HeaderStyle-Font-Size="8"  HeaderStyle-HorizontAlalign="left" ItemStyle-HorizontalAlign="Left">                                       
    
                            <HeaderStyle Font-Size="8pt" Width="50px"></HeaderStyle>
    
                        </asp:BoundColumn>
    
                                           
    
                        <asp:BoundColumn DataField="To Date" HeaderText="To Date" HeaderStyle-Width="50" HeaderStyle-Font-Size="8" HeaderStyle-HorizontAlalign="left" ItemStyle-HorizontalAlign="Left">                                      
    
                            <HeaderStyle Font-Size="8pt" Width="50px"></HeaderStyle>
    
                        </asp:BoundColumn>
    
                       
    
                        <asp:BoundColumn DataField="SalesRepIDOriginal" HeaderText="SalesRepIDOriginal" HeaderStyle-Width="50" HeaderStyle-Font-Size="8" HeaderStyle-HorizontAlalign="Left" ItemStyle-HorizontalAlign="Left">
    
                            <HeaderStyle Font-Size="8pt" Width="50px"></HeaderStyle>
    
                        </asp:BoundColumn>
    
                       
    
                        <asp:BoundColumn DataField="SalesRepIDSecondary" HeaderText="SalesRepIDSecondary" HeaderStyle-Width="50" HeaderStyle-Font-Size="8" HeaderStyle-HorizontAlalign="Left" ItemStyle-HorizontalAlign="Left">
    
                            <HeaderStyle Font-Size="8pt" Width="50px"></HeaderStyle>
    
                        </asp:BoundColumn>
    
     
    
                        <asp:TemplateColumn HeaderText="Remove Coverage" HeaderStyle-Width="30"  HeaderStyle-Font-Size="8"  >
    
                            <ItemTemplate><asp:LinkButton ID="RemoveAscButton" runat="server" Text = '<%# Eval("Action2") %>' Width="30" HeaderStyle-HorizontAlalign="Left" OnClick="RemoveAssociation"></asp:LinkButton></ItemTemplate>
    
                            <HeaderStyle Width="50px"></HeaderStyle>
    
                        </asp:TemplateColumn>
    
                                        
    
      
    
                                                       
    
                    </Columns>
    
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    
                    <EditItemStyle BackColor="#2461BF" />
    
                    <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    
                    <AlternatingItemStyle BackColor="White" />
    
                    <ItemStyle BackColor="#EFF3FB" />
    
                    <HeaderStyle BackColor="#0000CC" Font-Bold="True" ForeColor="White" />                     
    
                    </asp:DataGrid>
    
                            <asp:Panel ID="pnlAddEdit" runat="server"   CssClass="modalPopup" style = "display:none">
    
                           
    
                                        <asp:Label Font-Bold="true" ID = "TitleLabel" runat="server" Text="Temporary Coverage ID:"></asp:Label>
    
                                        <asp:Label Font-Bold="true" Font-Underline="true" ID = "lblTempCoverageID" runat="server" Text=""></asp:Label>                         
    
     
    
                            <br />                      
    
                            <table align="center">                              
    
     
    
                                                        
    
                            
    
                            <tr>
    
                            <td>
    
                            &nbsp;</td>
    
                                <td>
    
                                    <asp:Label ID="lblDeleteQuestion" runat ="server" Font-Bold="true" Text ="Are you sure you want to delete this temporary coverage item?"  Visible="true"></asp:Label>
    
                                </td>
    
                            </tr>
    
                            <tr>
    
                                <td>
    
                                    <asp:Label ID="lblSalesRepFromHeading" runat ="server" Font-Bold="true" Text ="-------------Sales Rep From----------------------------"  Visible="true"></asp:Label>
    
                                </td>
    
                            </tr> 
    
                                                                                                
    
                            <tr>
    
                                  <td>                               
    
                                     <asp:Label ID="lblPnlSalesRepFrom" runat ="server" Text ="Sales Rep From"  Visible="true" AssociatedControlID="txtPnlSalesRepFrom"></asp:Label>
    
                                  </td> 
    
                                    <td>                                                        
    
                                              <asp:hiddenfield id="hdnValue1" onvaluechanged="hdnValue_ValueChanged1" runat="server"/>
    
                                              <asp:TextBox runat="server" ID="txtPnlSalesRepFrom" Width="160px" AutoPostBack="False"  OnSelectedIndexChanged="txtPnlSalesRepFrom_SelectedIndexChanged" AutoCompleteType="LastName"></asp:TextBox>
    
                                                  <cc1:AutoCompleteExtender
    
                                                  ID="acetxtPnlSalesRepFrom"
    
                                                  runat="server"
    
                                                  ServiceMethod="Get_SalesReps"
    
                                                  ServicePath="~/Web Services/LRTWebService.asmx"
    
                                                  MinimumPrefixLength="2"
    
                                                  CompletionInterval="100"
    
                                                  EnableCaching="false"
    
                                                  CompletionSetCount="10"
    
                                                  TargetControlID="txtPnlSalesRepFrom"
    
                                                  FirstRowSelected="false"
    
                                                  CompletionListCssClass="autocomplete_completionListElement"
    
                                                  CompletionListItemCssClass="autocomplete_listItem" OnClientShown="PopupShown"
    
                                                  OnClientItemSelected="OnContactSelected1"
    
                                                  CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem">
    
                                                </cc1:AutoCompleteExtender>
    
                                  </td>                         
    
                             </tr>
    
                             <tr>
    
                                  <td>                               
    
                                     <asp:Label ID="lblPnlSalesRepCodeFrom" runat ="server" Text ="Sales Rep Code From"  AssociatedControlID="txtPnlSalesRepCodeFrom" ></asp:Label>
    
                                  </td> 
    
                                    <td>                                                          
    
                                         <asp:TextBox ID="txtPnlSalesRepCodeFrom" Width ="160px" runat="server"></asp:TextBox>
    
                                  </td>                         
    
                             </tr>
    
                             <tr>
    
                                  <td>                               
    
                                     <asp:Label ID="lblPnlRepEmailFrom" runat ="server" Text ="Sales Rep Email From"  AssociatedControlID="txtPnlRepEmailFrom"  ></asp:Label>
    
                                  </td> 
    
                                    <td>                                                       
    
                                         <asp:TextBox ID="txtPnlRepEmailFrom" Width ="160px" runat="server"></asp:TextBox>
    
                                  </td>                         
    
                             </tr>
    
                             <tr>
    
                                  <td>                               
    
                                     <asp:Label ID="lblPnlSalesRepTeamFrom" runat ="server" Text ="Sales Rep Team From" AssociatedControlID="txtPnlRepTeamFrom" ></asp:Label>
    
                                  </td> 
    
                                    <td>                                                          
    
                                         <asp:TextBox ID="txtPnlRepTeamFrom" Width ="160px" runat="server"></asp:TextBox>
    
                                  </td>                         
    
                             </tr>
    
                               <tr>
    
                                <td>
    
                                    <asp:Label ID="lblSalesRepToHeading" runat ="server" Font-Bold="true" Text ="-------------Sales Rep To--------------------------------"  Visible="true"></asp:Label>
    
                                </td>
    
                            </tr> 
    
                             <tr>
    
                                   <td>                               
    
                                     <asp:Label ID ="lblPnlSalesRepTo" runat="server" Text ="Sales Rep To" Visible="true" AssociatedControlID="txtPnlSalesRepTo"></asp:Label>                             
    
                                   </td>
    
                                   <td>
    
                                              <asp:hiddenfield id="hdnValue2" onvaluechanged="hdnValue_ValueChanged2" runat="server"/>
    
                                              <asp:TextBox runat="server" ID="txtPnlSalesRepTo" Width="160px" AutoPostBack="True"  OnSelectedIndexChanged="txtPnlSalesRepTo_TextChanged"></asp:TextBox>
    
                                                  <cc1:AutoCompleteExtender
    
                                                  ID="acetxtPnlSalesRepTo"
    
                                                  runat="server"
    
                                                  ServiceMethod="Get_SalesReps"
    
                                                  ServicePath="~/Web Services/LRTWebService.asmx"
    
                                                  MinimumPrefixLength="2"
    
                                                  CompletionInterval="100"
    
                                                  EnableCaching="false"
    
                                                  CompletionSetCount="10"
    
                                                  TargetControlID="txtPnlSalesRepTo"
    
                                                  FirstRowSelected="false"
    
                                                  CompletionListCssClass="autocomplete_completionListElement"
    
                                                  CompletionListItemCssClass="autocomplete_listItem" OnClientShown="PopupShown"
    
                                                  OnClientItemSelected="OnContactSelected2"
    
                                                  CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem">
    
                                                </cc1:AutoCompleteExtender>
    
                                   </td>                            
    
                             </tr>                                                  
    
                                  <td>                               
    
                                     <asp:Label ID="lblPnlSalesRepCodeTo" runat ="server" Text ="Sales Rep Code To"  AssociatedControlID="txtPnlSalesRepCodeTo"></asp:Label>
    
                                  </td> 
    
                                    <td>                                                          
    
                                         <asp:TextBox ID="txtPnlSalesRepCodeTo" Width ="160px" runat="server"></asp:TextBox>
    
                                  </td>                         
    
                             </tr>
    
                             <tr>
    
                                  <td>                               
    
                                     <asp:Label ID="lblPnlSalesRepEmailTo" runat ="server" Text ="Sales Rep Email To"   AssociatedControlID="txtPnlSalesRepEmailTo"></asp:Label>
    
                                  </td> 
    
                                    <td>                                                         
    
                                         <asp:TextBox ID="txtPnlSalesRepEmailTo" Width ="160px" runat="server"></asp:TextBox>
    
                                  </td>                         
    
                             </tr>
    
                             <tr>
    
                                  <td>                               
    
                                     <asp:Label ID="lblPnlSalesRepTeamTo" runat ="server" Text ="Sales Rep Team To"  AssociatedControlID="txtPnlSalesRepTeamTo"></asp:Label>
    
                                  </td> 
    
                                    <td>                                                          
    
                                         <asp:TextBox ID="txtPnlSalesRepTeamTo" Width ="160px" runat="server"></asp:TextBox>
    
                                  </td>                         
    
                             </tr>
    
     
    
                            <tr>
    
                                <td>
    
                                    <asp:Label ID="Label1" runat ="server" Font-Bold="true" Text ="-------------Schedule------------------------------------"  Visible="true"></asp:Label>
    
                                </td>
    
                            </tr>           
    
                            <tr>
    
                                  <td>                               
    
                                     <asp:Label ID="lblDateTimeFrom" runat ="server" Text ="Date Time From" AssociatedControlID="TextDateTimeFrom"></asp:Label>
    
                                  </td> 
    
                                    <td>                                                            
    
                                         <asp:TextBox ID="TextDateTimeFrom" Width ="160px" runat="server" CssClass="datepicker-text"></asp:TextBox>
    
                                         <cc1:CalendarExtender ID="TextDateTimeFrom_CalendarExtender" runat="server" Enabled="True"
    
                                            TargetControlID="TextDateTimeFrom" CssClass="cal_Theme1" PopupButtonID="imgBeginDate"
    
                                            PopupPosition="TopRight" Format="MMM d, yyyy" OnClientShown="calendarShown">
    
                                          </cc1:CalendarExtender>                                                                                            
    
                                  </td>                                                    
    
                             </tr>                           
    
                             <tr>
    
                                  <td>                               
    
                                     <asp:Label ID="lblDateTimeTo" runat ="server" Text ="Date Time To" AssociatedControlID="TextDateTimeTo"></asp:Label>
    
                                  </td> 
    
                                    <td>                                                       
    
                                         <asp:TextBox ID="TextDateTimeTo" Width ="160px" runat="server" CssClass="datepicker-text"></asp:TextBox>
    
                                          <cc1:CalendarExtender ID="TextDateTimeTo_CalendarExtender" runat="server" Enabled="True"
    
                                            TargetControlID="TextDateTimeTo" CssClass="cal_Theme1" PopupButtonID="imgBeginDate"
    
                                            PopupPosition="TopRight" Format="MMM d, yyyy"  OnClientShown="calendarShown">
    
                                          </cc1:CalendarExtender>
    
                                  </td>                         
    
                             </tr>   
    
                                   <tr>
    
                                    <td>
    
                                    <asp:Label ID= "lblConfirm" runat = "server" Font-Bold="True" ForeColor="#B30000"  AssociatedControlID="ButtonYes"></asp:Label>
    
                                    </td>
    
                                    </tr>
    
                                    <tr>
    
                                     <td>
    
                                      <asp:Button  ID="ButtonSave" runat ="server" Text="Save" OnClick="BtnSave_Click" />                               
    
                                     </td>
    
                                     <td>
    
                                       <asp:Button ID ="ButtonCancel" runat ="server" Text="Cancel" OnClick="CloseEditForm" />
    
                                     </td>
    
                                    <td>
    
                                        <asp:Button ID="ButtonYes" runat="server" OnClick="BtnYes_Click" Text="Yes" />
    
                                    </td>
    
                                   <td>
    
                                        <asp:Button ID="ButtonNo" runat="server" OnClick="CloseEditForm" Text="No" />
    
                                    </td>                            
    
                                    </tr>         
    
                            </table>                             
    
                            </asp:Panel>                      
    
                            <asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
    
                           
    
                            
    
                             <cc1:ModalPopupExtender ID="popup" runat="server" PopupControlID="pnlAddEdit"
    
                             Enabled="true" BackgroundCssClass="#FFFFFF"
    
                              TargetControlID="lnkFake">                          
    
                            </cc1:ModalPopupExtender>       
    
                        </div>                                      
    
                    </td>
    
                    <td style="width: 65px; height: 91px;">
    
                        </td>
    
                    <td style="height: 91px">
    
                        </td>
    
                </tr>
    
            </table>         
    
        </div>  
    
    </asp:Content>

    Tuesday, November 10, 2020 12:03 PM
  • User-1330468790 posted

    Hi carrolls,

     

    Sorry that I could not reproduce your problem when I tested with a simplified code.

    You could try below codes to see if the codes cannot work from your side.

    aspx:

    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <table style="width: 100%; height: 91px;">
    
            <tr>
    
                <td style="width: 75px; height: 91px;"></td>
    
                <td style="width: 800px; height: 91px;">
    
    
    
                    <div  style="background: white; border-color: #7f9db9; border-width: 1px;">
    
    
    
                        <asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="False"
                            CellPadding="1" ForeColor="#333333" GridLines="Both" Width="800px">
    
    
                            <Columns>
    
                                <asp:TemplateColumn HeaderText="Action" HeaderStyle-Width="30" HeaderStyle-Font-Size="8">
    
                                    <ItemTemplate>
    
                                        <asp:LinkButton ID="EditButton" runat="server" Text='<%# Eval("Action") %>' Width="30" HeaderStyle-HorizontAlalign="Left" OnClick="Edit">
    
                                        </asp:LinkButton>
                                    </ItemTemplate>
                                    <HeaderStyle Width="50px"></HeaderStyle>
    
                                </asp:TemplateColumn>
    
    
    
                                <asp:BoundColumn DataField="ReferralsReassignID" HeaderText="ID" HeaderStyle-Width="1" Visible="true" HeaderStyle-Font-Size="8" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
    
                                    <HeaderStyle Font-Size="8pt" Width="200px"></HeaderStyle>
    
                                </asp:BoundColumn>
    
    
                            </Columns>
    
                            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    
                            <EditItemStyle BackColor="#2461BF" />
    
                            <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    
                            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    
                            <AlternatingItemStyle BackColor="White" />
    
                            <ItemStyle BackColor="#EFF3FB" />
    
                            <HeaderStyle BackColor="#0000CC" Font-Bold="True" ForeColor="White" />
    
                        </asp:DataGrid>
    
                        <asp:Panel ID="pnlAddEdit" runat="server" CssClass="modalPopup" style = "display:none">
                            <asp:Label Font-Bold="true" ID="TitleLabel" runat="server" Text="Temporary Coverage ID:"></asp:Label>
    
                            <asp:Label Font-Bold="true" Font-Underline="true" ID="lblTempCoverageID" runat="server" Text="123"></asp:Label>
                            
                        <asp:Button ID="ButtonYes" runat="server" OnClick="ButtonYes_Click" Text="Yes" />
    
                        </asp:Panel>
    
                        <asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
    
    
                        <ajaxToolkit:ModalPopupExtender ID="popup" runat="server" PopupControlID="pnlAddEdit"
                            Enabled="true" BackgroundCssClass="#FFFFFF"
                            TargetControlID="lnkFake">
                        </ajaxToolkit:ModalPopupExtender>
    
                    </div>
    
                </td>
    
                <td style="width: 65px; height: 91px;"></td>
    
                <td style="height: 91px"></td>
    
            </tr>
    
        </table>
    </asp:Content>

    Code behind: with a simulation of data

    Private Shared _gridviewDT As DataTable
    
        Public Shared Property GridviewDT As DataTable
            Get
    
                If _gridviewDT Is Nothing Then
                    _gridviewDT = New DataTable()
                    _gridviewDT.Columns.Add("ReferralsReassignID", GetType(Integer))
                    _gridviewDT.Columns.Add("Action", GetType(String))
                    _gridviewDT.Rows.Add(1, "name1")
                    _gridviewDT.Rows.Add(2, "name2")
                    _gridviewDT.Rows.Add(3, "name3")
                    _gridviewDT.Rows.Add(4, "name4")
                    _gridviewDT.Rows.Add(5, "name5")
                End If
    
                Return _gridviewDT
            End Get
            Set(ByVal value As DataTable)
                _gridviewDT = value
            End Set
        End Property
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                DataGrid1.DataSource = GridviewDT
                DataGrid1.DataBind()
            End If
        End Sub
    
        Protected Sub Edit(ByVal sender As Object, ByVal e As EventArgs)
            popup.Show()
        End Sub
    
        Protected Sub ButtonYes_Click(ByVal sender As Object, ByVal e As EventArgs)
            popup.Hide()
        End Sub

    Demo:

     

    Here are some guesses from JQuery side:

    • The JQuery conflicts: Could you please make sure that only one JQuery file is working in your project?
    • The JQuery could not handle the key event for enter key: Could you please try to use another stable version of JQuery

      

    I suggest you could try to use javascript native function to see if it is able to make key event working on anchor element:

    <script>
            // Get the EditButton since the id will always contain the server side id.
            document.querySelector('[id *= EditButton]').addEventListener("keydown", TriggerLink, false);
    
            function TriggerLink(e) {
                if (!e) e = window.event;
                var keyCode = e.keyCode || e.which;
                // enter key code is 13 and you should see an alert with doPostBack function content
                if (keyCode == '13') {
                    alert("Triggered: " + this);
                    this.click();
                }
            }
        </script>

     

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 11, 2020 11:40 AM
  • User-753919028 posted

    Thank you very much Sean, you have given me a lot of material to work through. Hopefully it will point me in the right direction.  

    Much appreciated.

    Wednesday, November 11, 2020 5:00 PM
  • User-753919028 posted

    Hi Sean and everybody who runs into this problem.

    The way to get it working with TAB->SPACE (TAB->ENTER would be better but I will settle with TAB->SPACE)  is not to use Link buttons  but ordinary ASP buttons in the gridview.

    At least I am A11Y compliant by using normal buttons.

    Thanks and good wishes Sean.

    Wednesday, November 11, 2020 6:24 PM
  • User-1330468790 posted

    Hi carrolls,

     

    So glad to hear that you change another approach to solve the problem as I previously thought that you have to use LinkButton.

    If you feel above answer helps, you could mark that answer which might help others who are facing the similar problem.

     

    Thank you for understanding.

    Best regards,

    Sean

    Thursday, November 12, 2020 10:39 AM
  • User-753919028 posted

    Hi Sean, I marked your answer as the answer, as if it was the requirement that a link button was needed, that would be the answer.

    Thanks very much for the help on this Sean.

    Thursday, November 12, 2020 3:33 PM