accessibility GridButtonColumn clicking using keyboard

[david]

 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>

[Attila Antal]

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