So far, our grid has been read only, but, invariably, your users will need to open documents. This post shows how to get the selected row and obtain the unid needed to build the url to open the document.
Dojo Data Grid Series
- Part 1: Concepts and Default Features
- Part 2: Creating a REST Service
- Part 3: Creating Your First Grid
- Part 4: Additional Grid Features
- Part 5: Grid Column Features
- Part 6: Reordering Columns
- Part 7: Sorting
Grid Events
There are several events on the Dojo Data Grid. Of particular note when adding the ability to open a document are the onRowClick and onRowDblClick events.
You can put code on either of these events to open a document.
Getting the selected unid
When you write code in one of these events, an object is passed in with a lot of properties and you can access it via arguments[0].
It has all of these properties available:
rowNode, rowIndex, dispatch, grid, sourceView, cellNode, cellIndex, cell, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, stopPropagation, preventDefault, initEvent, stopImmediatePropagation, which, rangeParent, rangeOffset, pageX, pageY, isChar, screenX, screenY, mozMovementX, mozMovementY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, button, buttons, relatedTarget, mozPressure, mozInputSource, initMouseEvent, initNSMouseEvent, getModifierState, layerX, originalTarget, explicitOriginalTarget, preventBubble, preventCapture, getPreventDefault, isTrusted, view, detail, initUIEvent, layerY, cancelBubble, NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE, MOUSEDOWN, MOUSEUP, MOUSEOVER, MOUSEOUT, MOUSEMOVE, MOUSEDRAG, CLICK, DBLCLICK, KEYDOWN, KEYUP, KEYPRESS, DRAGDR, FOCUS, BLUR, SELECT, CHANGE, RESET, SUBMIT, SCROLL, LOAD, UNLOAD, XFER_DONE, ABORT, ERROR, LOCATE, MOVE, RESIZE, FORWARD, HELP, BACK, TEXT, ALT_MASK, CONTROL_MASK, SHIFT_MASK, META_MASK, SCROLL_PAGE_UP, SCROLL_PAGE_DOWN, MOZ_SOURCE_UNKNOWN, MOZ_SOURCE_MOUSE, MOZ_SOURCE_PEN, MOZ_SOURCE_ERASER, MOZ_SOURCE_CURSOR, MOZ_SOURCE_TOUCH, MOZ_SOURCE_KEYBOARD
The rowIndex property provides the row number that was clicked. The grid property provides a handle to the grid.
In the Extension Library book, there’s an example that shows using the rowIndex and looking up information from the REST service based on that index, but using the _items property of the REST service didn’t seem to work for me, so I had to approach it from a different angle. I believe it is because I’m using the viewJsonService REST service as opposed to the viewItemFileService REST service.
The output from the viewJsonService REST service is on the left in the image below and the output from the viewItemFileService REST service is on the right. The viewItemFileService provides the items object to reference the entries.
My Solution
Fortunately, you can get the information needed from the grid itself. The code below works to open the document from the grid.
I’ve included a few comments with additional options for obtaining the same information in another way.
var grid = arguments[0].grid;
// ^^ Another Option: var grid = dijit.byId('#{id:djxDataGrid1}');
var index = arguments[0].rowIndex;
// ^^ Another Option: var index = grid.selection.selectedIndex;
var item = grid.getItem(index);
var unid = item["@unid"];
var url = "XPage.xsp?documentId=" + unid +"&action=openDocument";
window.document.location.href = url;
// ^^ Another Option: window.open(url, 'docWindow');
To use this in your application, just change the url variable to start with the proper name of your XPage to display the document.
Up Next
In the next post in this series, we’ll take a look at adding and aligning multi-row entries in the grid.
