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

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.

Grid8_1

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.

Advertisements

14 responses to “Dojo Data Grid – Part 8: Opening Documents”

  1. Brad Balassaitis says :

    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;

    • Jim Witthoff says :

      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!

      • Brad Balassaitis says :

        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.

      • Jim Witthoff says :

        The updated code works great, both when scrolling past the first page and with filtering. Thanks so much!

      • Brad Balassaitis says :

        You’ve welcome! Thanks for confirming that it did the trick.

  2. anukiranRavi Kiran says :

    This code is not working for IE8 my rowIndex/selectedIndex is coming as null 😦

    • Brad Balassaitis says :

      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.

      • anukiran says :

        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,

      • Brent Madsen says :

        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?)

      • Brad Balassaitis says :

        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.

  3. puhmaa says :

    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?

    • Brad Balassaitis says :

      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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: