Dojo Data Grid – Part 8: Opening Documents
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.
This code works if using a viewItemFileService REST service:
var pageName = ‘MyPageName.xsp’;
var index = arguments[0].rowIndex;
var unid = REST_SERVICE_NAME._items[index].attributes[“@unid”];
var url = pageName + ‘?documentId=’ + unid + ‘&action=openDocument’;
window.document.location.href = url;
This script only works for me on the initial rows displayed in the grid. If I scroll down in the grid, the REST_SERVICE_NAME_items appears to return null (although the index is valid). It also does not work on filtered results (the only reason I’m using the viewItemFileService). Any ideas? Thanks!
Great catch! I hadn’t tested it beyond a prototype with the first screen of data and I got that code from the Mastering XPages book, so I didn’t look into it further.
This code works in my prototype with a viewItemFileService. It’s similar to what’s posted in the blog post, but with a slight difference because of the difference in the JSON provided by viewItemFileService:
var pageName = ‘MyPageName.xsp’;
var grid = arguments[0].grid;
var index = arguments[0].rowIndex;
var item = grid.getItem(index).attributes;
var unid = item[“@unid”];
var url = pageName + ‘?documentId=’ + unid + ‘&action=openDocument’;
window.document.location.href = url;
Let me know how it goes.
The updated code works great, both when scrolling past the first page and with filtering. Thanks so much!
You’ve welcome! Thanks for confirming that it did the trick.
This code is not working for IE8 my rowIndex/selectedIndex is coming as null 😦
I don’t have IE8 to test with, but when I set the browser mode to IE8 (using IE8 standards) with the IE developer tools, it works for me. It even works when simulating IE7 mode. Are you using compatibility mode by chance? If so, try turning that off to see if it makes a difference.
Brad, When i use var index = arguments[0].rowIndex;
and index is coming as “unidentified” it works fine in FireFox and I was able to get the Index value as 1 or 2 or 3 based on my row selection. I am using REST viewItemFileService,
When using your code under your “My Solution” section, the code works in Chrome and Firefox, but fails with IE9. Using a debugger with IE9, I get the error: “SCRIPT5007: Unable to get value of the property ‘getItem’: object is null or undefined “. Other research I have done indicates that IE9 doesn’t like to get values from the local memory or files. Is this because we are using client side JavaScript code here? Do you have a work-around for this? (using server side JavaScript if possible to eliminate the client or local memory?)
That seems strange. I haven’t seen an error like this.
The grid is client-side, so it’s not quite as easy to trigger server-side code (although it is possible). Even if you did, you’d need to be able to read the UNID of the document from the grid in order to know which document you want to open.
Do you get a valid value for the rowIndex that is clicked? (You could use an alert() to display it.) That would be a start.
Hi, instead of opening the document in a new window, I would like to render it in a xe:dialog instead.
I tried:
XSP.openDialog(“#{id:inPlaceDialog1}”)
However, in the dialog I cannot get a handle to the selected document (e.g. @UNID).
Is there a simple way to do this?
You could use the JSON RPC component. It lets you trigger SSJS from client-side JS.
The grid’s click handler could call an RPC method and pass in the UNID. Then the RPC method can use SSJS to put that UNID into a scope variable. The document within the dialog can have a data source that looks to that scope variable for the document ID.
Works perfectly. Many Thanks for pointing me in the right direction!
Glad to hear it! Thanks for following up.