Unexplained variation in client side row selection behaviour between mouse click and cursor keys

[Tom]

I am working on a project whereby we need keyboard command accessibility with the RadGrid for a rapid data review process. Unfortunately I appear to be running into an unexplained variation between row selection behaviours on the client side. I have currently extended the default behaviour of the RadGrid using external classes and supporting javascript to perform the following features (all using AJAX where necessary):

1. To ensure the RadGrid retains the keyboard focus after a postback that performs an insert/update, so that the user may continue to navigate along the rows using the cursor keys
2. To ensure that the last edited row index is added to the server side grid instance's SelectedIndexes property before prerender, so that the user can continue to navigate along the rows using the cursor keys from the last row that they edited
3. To ensure the first editor control contained within a cell of an edited row acquires the keyboard focus on an initinsert / edit, initiated by pressing the enter key
4. To ensure that the editor control within a cell captures the keyboard focus when that cell is double clicked on by the user

Implementing all of this has been thus far pretty painless. I would first of all like to express that I couldn't be happier with the server-side documentation and examples for the control, however the the client side API documentation is severely lacking and I see that in some circumstances other users are left with little choice other than to come to the forums for help (although I can sympathise with the documentation challenges that Javascript development represents). Hence why I am here. Sad face.

I would like to draw your attention to your following RadGrid keyboard support example, where the problem I am about to describe manifests itself: http://demos.telerik.com/aspnet-ajax/grid/examples/client/keyboardnavigation/defaultcs.aspx

I would recommend switching to the Office2007 skin which makes the unexplained variation in selection behaviour more apparent.

The problem is thus:

1. Select a row using the mouse. The selected row turns orange.
2. Select another row using the mouse. The previous row is deselected, the newly selected row now turns orange. Lets call this behaviour "A".
3. Using the up or down cursor arrow on the keyboard, the selection behaviour changes. The appearance of the selected row is now light blue.
4. Navigate across as many rows as you like with the cursor keys, the selected row remains light blue. Lets call this behaviour "B".
5. Now using the mouse, repeat steps 1 and 2. The selection behaviour has transitioned permanently from behaviour "A" to behaviour "B".

On the pre-render behaviour described for 2nd implemented feature, I perform the following:

_grid.SelectedIndexes.Add(_editedItem.ItemIndex)

When the grid appears in the browser, the row is selected with the appearance of selection behaviour "A". When the grid is in this mode, the Enter key does not initiate editing as I would expect. However, transitioning to behaviour "B" as described above, and Enter will initiate editing.

What is the difference between behaviours "A" and "B"? Why is the selection behaviour transition permanent? How would I initialise the grid after an AJAX response into behaviour "B" by default?


Many thanks

TLK

[Daniel]

Hello Tom,

Thank you for the feedback.

The first behavior (A) is the standard selection - it is active by default. As long as there is no active row, the selected items will appear with "selected" style.

The second behavior (B) is related to the active row - this mode is active when using the keyboard navigation. As soon as you press any key (navigation) you will change the active row. The style of the active row takes precedence over the "selected" style.

Depending on your scenario you can try one of the following options:
- make the selected style look as activerow style
- set the activerow manually on pageload

<script type="text/javascript">
    function pageLoad()
    {
        var radGrid = $find('<%= RadGrid1.ClientID %>');
        var firstRow = radGrid.get_masterTableView().get_dataItems()[0].get_element();
        radGrid.set_activeRow(firstRow);
    }
</script>

protected void Page_Load(object sender, EventArgs e)
{
    RadGrid1.ClientSettings.ActiveRowIndex = "0";
}

<style type="text/css">
    .rgMasterTable tr.rgSelectedRow td
    {
        -moz-background-clip: border;
        -moz-background-origin: padding;
        -moz-background-size: auto auto;
        background-attachment: scroll;
        background-color: #ECF4FF;
        background-image: none;
        background-position: 0 0;
        background-repeat: repeat;
        border-bottom-color: #D0D7E5;
    }
</style>

Best regards,
Daniel
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Tom]

RadGrid1.ClientSettings.ActiveRowIndex = "0";

Did the job splendidly.

Many thanks!

[Vk]

Hi Daniel,

Is it not possible that the active row also take the style of selected I mean instead of active row displayed as light blue it should display orange? 
I am asking this because in my case all the grids have the selected style (skin="office2007") and do not have have keyboard navigation except the one grid so as per your suggestion if I would make the selected style look like active row style it would be different than others which would not be acceptable to the client.

So is there a way that I could display active row as selected row?

Thanks,
Vk

[Daniel]

Hello Vk,

Try the following:

<style type="text/css">
    .rgMasterTable tr.rgActiveRow
    {
        background: url("Grid/sprite.gif") repeat-x scroll 0 -3900px #FFCB60;
    }
</style>

I hope this helps.

Kind regards,
Daniel
the Telerik team