accessibility GridButtonColumn clicking using keyboard

2 posts, 0 answers
  1. david
    david avatar
    242 posts
    Member since:
    May 2007

    Posted 10 Oct 2019 Link to this post

     we have a one column grid of GridButtonColumn and when the user arrows to a row we need the user to "click" the button with a keyboard. A "return" and a spacebar does not work?

      <telerik:RadGrid ID="RadGrid2" runat="server" HorizontalAlign="Center"
                        DataSourceID="SqlDataSource2" OnItemCommand="RadGrid2_ItemCommand"
                        PageSize="30" Width="99%" CellSpacing="0" Skin="Bootstrap" AllowAutomaticUpdates="false" AllowAutomaticInserts="false"
                        EnableAriaSupport="true">
                        <ClientSettings EnableRowHoverStyle="True" AllowKeyboardNavigation="true" KeyboardNavigationSettings-FocusKey="Z" KeyboardNavigationSettings-AllowSubmitOnEnter="true">
                            <Selecting AllowRowSelect="True" />
                        </ClientSettings>
                        <MasterTableView CommandItemDisplay="None" Width="100%" AutoGenerateColumns="False" DataSourceID="SqlDataSource2">
                            <Columns>
                                <telerik:GridButtonColumn ButtonType="LinkButton" DataTextField="ProgramName" CommandName="SelectProgram" HeaderText="Program Name (Click to Select)" ></telerik:GridButtonColumn>
                                <telerik:GridBoundColumn DataField="ProgramCode" FilterControlAltText="Filter ProgramCode column" HeaderText="ProgramCode" SortExpression="ProgramCode" UniqueName="ProgramCode" Display="false">
                                </telerik:GridBoundColumn>
                            </Columns>
                            <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
                            <RowIndicatorColumn>
                                <HeaderStyle Width="20px" />
                            </RowIndicatorColumn>
                            <ExpandCollapseColumn>
                                <HeaderStyle Width="20px" />
                            </ExpandCollapseColumn>
                        </MasterTableView>
                        <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
                        <FilterMenu EnableImageSprites="False"></FilterMenu>
                        <HeaderContextMenu></HeaderContextMenu>
                    </telerik:RadGrid>

  2. Attila Antal
    Admin
    Attila Antal avatar
    520 posts

    Posted 15 Oct 2019 Link to this post

    Hi David,

    Is there an issue you would like to report or you would like to know how to implement a functionality that will click a specific button when pressing Return (ENTER) key? 

    If there is an issue, I would like to know more about it. Please share all the details you have.

    Else, if you would like to implement a custom JavaScript logic to manually click a button, you can take advantage of the OnKeyPress client-side event of the Grid. In that event handler, you can then execute any logic of your choice.

    Here is an example code showing how to cancel the original events, access the current active row, find the desired button and click that programmatically.

    RadGrid declaration:

    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" Width="800px" AllowFilteringByColumn="true">
        <MasterTableView>
            <Columns>
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                        <telerik:RadButton ID="RadButton1" runat="server" Text="Insert New Item" CommandName="InitInsert"></telerik:RadButton>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridButtonColumn Text="Edit Row" UniqueName="ButtonColumn" ItemStyle-CssClass="myButton" CommandName="Edit" ButtonType="PushButton"></telerik:GridButtonColumn>
                <%--<telerik:GridEditCommandColumn UniqueName="EditColumn"></telerik:GridEditCommandColumn>--%>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowKeyboardNavigation="true">
            <KeyboardNavigationSettings />
            <ClientEvents OnKeyPress="GridKeyPress" />
        </ClientSettings>
    </telerik:RadGrid>

     

    JavaScript code:

    <script type="text/javascript">
        function GridKeyPress(sender, args) {
            if (args.get_keyCode() == 13) {
                args.set_cancel(true);
                var activeRow = sender._activeRow;
                        
                var InsertButton = $telerik.findControl(sender._activeRow, "RadButton1");
                //InsertButton.click();
    
                var EditButton = $telerik.$(activeRow).find('td.myButton input[type="submit"]');
                EditButton.click();
            }
        }
    </script>

     

    Kind regards,
    Attila Antal
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top