Keyboard support not working with mouse selection

[Marcel]

Hello,

In my opinion, the keyboard support demo (Grid - Keyboard Support) shows some odd behaviour in combination with the mouse vs. keyboard selection. The keyboard only fully works when you follow a specific selection pattern.

First the expected behaviour using keyboard selection on the second row:
a.1) Open the demo from the link http://demos.telerik.com/aspnet-ajax/grid/examples/accessibility-and-internationalization/keyboard-support/defaultcs.aspx.
a.2) Select the first row with the mouse.
a.3) Press the down arrow to select the second row.
a.4) Press Enter and the row goes into edit mode. Pressing Escape cancels the edit mode. Great!

Now the same selection, but using the mouse:
b.1) Open the demo in a new browser page.
b.2) Select the second row by clicking clicking on the Contact Name cell.
b.3) Try to start edit mode by pressing Enter. Nothing happens. This is confusing for our users. It worked before?
b.4) Okay, so a small bug. Press the Pencil icon to go into edit mode.
b.5) Press Escape to cancel edit mode. Notice that nothing happen.
b.6) Pressing Enter does work. However, Enter does not work when you start editing after immediatelly pressing the Pencil icon.

I would like to have full keyboard support when using the mouse. The keyboard should work all the time, without telling the user to first use the arrow keys to get the grid into the proper editing mode.

Is this expected behaviour? I noticed the grid has a different mode when I use the arrow keys. Is there some setting I can use?

Best regards,

Marcel

http://demos.telerik.com/aspnet-ajax/grid/examples/accessibility-and-internationalization/keyboard-support/defaultcs.aspx

[Viktor Tachev]

Hi Marcel,


In the Keyboard navigation demo for RadGrid row selection is enabled. Because of this when a row is clicked it is marked as selected. However it is not focused to enter edit mode when the Enter key is pressed.

In order to achieve the behavior you would like, you could use a handler for the client KeyPress event of RadGrid. In the handler you could check what is the pressed key. If it is Enter - set the row in edit mode, if escape was pressed - cancel the editing of the currently edited row.

The handler would look similar to the one below:

function keyPress(sender, eventArgs) {
    var masterTableView = sender.get_masterTableView();

    if (eventArgs.get_keyCode() == 13) {
        var selectedItems = sender.get_masterTableView().get_selectedItems();

        if (selectedItems.length > 0) {
            masterTableView.editItem(selectedItems[0].get_element());
        }
    }

    if (eventArgs.get_keyCode() == 27) {
        masterTableView.cancelAll();
    }

}

For convenience I am also sending a sample project that is working as expected on my end. Give it a try and let me know if it is working for you.

Regards,
Viktor Tachev
Telerik

 

 

[Marcel]

Hello Victor,

Thank you for your reply. This is what I need to make the Enter and Escape keys work the way I want.

However, there still is a visually identifying whether a row has been made active or just selected. You have to remember exactly if you select a row using selection method I or II. Visually you can't tell if the selected row is the active row.

I guess I was expecting the active row to be the row I select using the mouse. What is the best way to achieve this? I would expect this to be the default behaviour of the grid.

Best regards,

Marcel

[Viktor Tachev]

Hello Marcel,

In this scenario the active row is also selected row. I made a short video as reference. Take a look at it and let me know if the behavior on your end is different.

If you would like to select multiple rows with the keyboard you could use the Ctrl key and the spacebar.

In case I have misunderstood what you would like to achieve would you describe in more detail the behavior you are looking for?

Regards,
Viktor Tachev
Telerik

 

 

[Marcel]

Hi Victor,

As I now understand, there is a small distinction between the active row and the selected row. There can be a selected row, but it is not marked active. This explains why the keyboard focus can be on a different row from the one selected with the mouse.

I changed our code so the first selected row is also made the active row through RadGrid.ClientSettings.ActiveRowIndex. This works for me. However, what I really like to see is stronger relationship between the selected row and the active row. In my opion the last selected row should also be the active row.

Best regards,

Marcel

[Viktor Tachev]

Hello Marcel,

If you would like to set the clicked row to be also active you could handle the OnRowClick client event for RadGrid. The JavaScript handler would look similar to the following:

function rowClick(sender, args) {
    var grid = sender;
    var dataItem = args.get_gridDataItem();

    grid.set_activeRow(dataItem.get_element());
}

Regards,
Viktor Tachev
Telerik