jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

Keyboard navigation/selection in jqGrid not working

Tags: row selection jqgrid

11/08/2010
15:46

RickB

New Member

Members

Forum Posts: 2

Member Since:
11/08/2010

Offline

Hi, all.

I've been trying without any luck to enable the arrow keys (up/down) to change the row selection in jqGrid, without any luck. At Tony's suggestion, I added celledit:true to the grid configuration, and editable:false to each column definition, which supposedly will work, but it doesn't. The up/down keys scroll the overall div/grid or the overall html page, depending on whether or not a scrollbar is present on the grid. In any case, these keys do not change the selected row.

Any help/suggestions welcomed!

Best,

Rick

jQuery("#grid").jqGrid({
      url:"/Thingworx/ThingShapes?Accept=application/json",
      mtype:"GET",
      datatype: "json",
      height: 250,
      jsonReader: {
        root: "rows", //arry containing actual data
        repeatitems: false,
        id: "name" //index of the column with the PK in it
      },
      rownumbers: false,
      altRows: true,
      sortname:'name',
      viewrecords:true,
      sortorder:"desc",
      celledit:true,
      caption:"Thingworx: ThingShapes",
      colNames:['Name','Description'],
      colModel:[
          {name:'name',index:'name', width:250, editable:false},
          {name:'description',index:'description', width:250, editable:false}
      ]
  });

21/10/2010
23:45

nathanmesser

New Member

Members

Forum Posts: 2

Member Since:
21/10/2010

Offline

I'm having the same problem. I'm using jqgrid 3.8, with the cell editing plugin, and I've set cellEdit to true, and set the column models editable property to false, as the advice suggests, and I can't get a row to be selected using the keyboard.

This is critical for us for accessibility reasons. Does anyone have any suggestions?

Regards,

Nathan Messer

19/09/2011
10:20

Charmaine

Member

Members

Forum Posts: 5

Member Since:
19/09/2011

Offline

I am another person with the same problem. I have some other requirements too.

The grid has virtually 250,000 rows, so I use virtual scrolling. I want to be able to [Tab] into the grid from the previous part of the form, selecting the first visible row at the same time, use up and down arrow keys to move up and down, and [Enter] to have the same effect as a mouse click (not all rows respond to clicks or [Enter]. The user does not do any editing.

I do not believe the complicated messes I have made trying to do this are close to the correct method.

19/09/2011
14:14

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

I think that the problem is that yopu do not have read docs and what is new and how to use keyboard navigation.

You may start here:

http://www.trirand.com/jqgridw.....jqgriddocs

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/09/2011
02:10

Charmaine

Member

Members

Forum Posts: 5

Member Since:
19/09/2011

Offline

I have read the documentation, but I found a lot of it difficult to understand. Like RickB, I can use up and down arrows to scroll the view of the grid, but cannot change the current selection. There is no mention in the documentation about controlling form focus either into the grid or within it (if I want the grid to take focus so that I can use keystrokes to change which row is selected using the arrow keys, what do I trigger the "focus" event on? How do I control which row is selected when I do? What if I am using virtual scrolling (and I am) and the row to be selected isn't loaded?).

I am going to try doing this again. But I don't want to make another mess of it, so let me check if I have this right.

I will need to include the cell editing module.
Because the server supplies JSON data, I will also need the Import/Export and JSON/XML modules.
Because "editable" defaults to false in the colModel options, I can leave that out.
The colModel will need extra hidden columns to store information that will be used to make the events work (and not using jQuery's data() to store it against the row's DOM object).
Formatting of the visible columns differs based on information in the hidden columns, so I also need the Formatter plugin.
The grid options will include "celledit:true" and "scroll:1″.
I use the keyBindings method to attach an event handler to the [Enter] key, and set "scrollingRows" in the same parameter object to true.
Because I often want to select an arbitrary row in the table (because there are so many rows, I have dynamically-generated indexes for the user to select from (either with a mouse-click or by using up/down arrows and hitting [Enter]) and then the grid should get focus) I want the grid's options to include "scrollrows:true". This seems to cause problems with virtual scrolling.

Would this be doing things the right way? But now I don't understand how to make clicking on a row have the same behaviour as selecting it with the keyboard and hitting [Enter]. There seems to be no kind of setting a row's "click" handler (except through accessing the DOM object – which I could not find support for).

21/09/2011
07:02

Charmaine

Member

Members

Forum Posts: 5

Member Since:
19/09/2011

Offline

I still can't get the focus from the rest of the form into the grid even if the grid contains a selected row.

If I use an event handler on the previous form element's [Tab] key to manually put the focus on the <table> or the selected <tr>, the up/down arrows simply trigger the grid to reload.

In fact, grid tries to reloads twice: first it reloads the first page and then it reloads the page it is supposed to. If the focus was on the row, then it gets lost (because the row was destroyed and replaced with a new one during the reload).

I wonder if this is related. I have already had to add a handler to the gridComplete event that sniffs out the selected row and uses scrollTop() to reposition the grid manually, so if the grid is scrolling to the top whenever I try to shift the selection, and then I'm resetting the scroll position, that would explain the two loads. Of course there shouldn't be any.

This keyboard inaccessibility is turning into a showstopper.

21/09/2011
08:05

Charmaine

Member

Members

Forum Posts: 5

Member Since:
19/09/2011

Offline

Update. By setting "scrollingRows:false" when calling bindKeys() (and osome ther random prodding), Keyboard focus is successful, the spontaneous reloading has stopped, and the up and down arrow keys do what they should. Woohoo!

All I need to do now is find out why the grid only scrolls by 15px per row when the height of a row is 22px, and I'll be totally satisfied.

Updated update: except now the grid won't scroll when using the mouse to move the scrollbar.