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

accessibility GridButtonColumn clicking using keyboard

1 Answer 15 Views
Grid
This is a migrated thread and some comments may be shown as answers.
david
Top achievements
Rank 1
david asked on 10 Oct 2019, 05:55 PM

 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>

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 15 Oct 2019, 03:14 PM

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.
Tags
Grid
Asked by
david
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or