Dojo Data Grid – Part 15: EnhancedGrid Printing

In the last post, we looked at the Dojo EnhancedGrid plugin for filtering. In this post, we’ll look at the EnhancedGrid Printer plugin, which provides the ability to preview and print the grid contents.

Dojo Data Grid Series

Print and Preview Functionality

The Printer plugin comes with three print options and three corresponding preview options:

  • Preview/Print All
  • Preview/Print Selected
  • Preview/Print Custom

Start with a Dojo EnhancedGrid

Before you can use an EnhancedGrid plugin, you need to be set up the Dojo Data Grid control to render as a Dojo EnhancedGrid. Follow the steps in this post to get ready.

1. Load the Printer Plugin

The dojox.grid.enhanced.plugins.Printer module must be included on the page, so add it to the page resources. Properties > Resources > Add > Dojo Module…

DojoDataGrid_15_0a_PluginModule

2. Add the Plugin to the Grid

The first step made the plugin module available, but you also need to add it to the grid.

Go to the properties of the Dojo Data Grid > Dojo and click the Add button. Add the property as shown here:

DojoDataGrid_15_0b_PluginAttribute

3. Add Printing and Preview Functions

Next, you need to add the client-side JavaScript functions that will execute the desired print and preview functionality. You can put them in an Output Script tag or a client-side JavaScript library to make them available on the page.

These functions were taken directly from the plugin documentation and modified slightly to work within XPages.

var gridName = "#{id:djxDataGrid1}";

function printAll(){
  dijit.byId(gridName).printGrid({
    title: "Grid Print - All"
  });
}

function printSelected(){
  dijit.byId(gridName).printSelected({
    title: "Grid Print - Selected"
  });
}

function printCustomized(intStart, intCount){
  dijit.byId(gridName).printGrid({
    title: "Grid Print - Customized",
    fetchArgs: {
      start: intStart,
      count: intCount
    }
  });
}

function preview(str){
  var win = window.open();
  win.document.open();
  win.document.write(str);
  /*Adjust row height/view width for multi-view grid*/
  dijit.byId(gridName).normalizePrintedGrid(win.document);
  win.document.close();
}

function previewAll(){
  dijit.byId(gridName).exportToHTML({
    title: "Grid Print - All"
  }, preview);
}

function previewSelected(){
  preview(dijit.byId(gridName).exportSelectedToHTML({
    title: "Grid Print - Selected"
  }));
}

function previewCustomized(intStart, intCount){
  dijit.byId(gridName).exportToHTML({
    title: "Grid Print - Customized",
    fetchArgs: {
      start: intStart,
      count: intCount
    }
  }, preview);
}

The primary changes I made were setting a variable with the client-side ID of the grid and setting the preview and print custom functions to accept variables, rather than use hard-coded values.

4. Add buttons to call the printing functions

Once the functions are ready, you can add buttons (or images or links) with client-side JavaScript code to call the print and preview functions.

Here is the source for the buttons on my sample page:

<xp:button value="Print All" id="button1">
  <xp:eventHandler event="onclick" submit="false">
    <xp:this.script><![CDATA[printAll()]]></xp:this.script>
  </xp:eventHandler>
</xp:button>
<xp:button value="Print Selected" id="button2">
  <xp:eventHandler event="onclick" submit="false">
    <xp:this.script><![CDATA[printSelected()]]></xp:this.script>
  </xp:eventHandler>
</xp:button>
<xp:button value="Print Customized" id="button3">
  <xp:eventHandler event="onclick" submit="false">
    <xp:this.script><![CDATA[printCustomized(200, 30)]]></xp:this.script>
  </xp:eventHandler>
</xp:button>
<xp:button value="Preview All" id="button4">
  <xp:eventHandler event="onclick" submit="false">
    <xp:this.script><![CDATA[previewAll()]]></xp:this.script>
  </xp:eventHandler>
</xp:button>
<xp:button value="Preview Selected" id="button5">
  <xp:eventHandler event="onclick" submit="false">
    <xp:this.script><![CDATA[previewSelected()]]></xp:this.script>
  </xp:eventHandler>
</xp:button>
<xp:button value="Preview Customized" id="button6">
  <xp:eventHandler event="onclick" submit="false">
    <xp:this.script><![CDATA[previewCustomized(200, 30)]]></xp:this.script>
  </xp:eventHandler>
</xp:button>

Default Browser Print Format

By default, the browser’s Print option prints exactly what you see on the page.
DojoDataGrid_15_1_BrowserPrint

Now, let’s take a look at the output from the Printer plugin.

Preview/Print Selected

With the enhanced grid, you can SHIFT+Click to select a set of rows and you can CTRL+Click to select non-contiguous rows. These options allow you to only print selected rows.
DojoDataGrid_15_2a_SelectRows

DojoDataGrid_15_2b_PreviewSelected

Preview/Print Custom

I think this is the best feature. It will start with the specified row and include the specified number of rows thereafter. I updated the code above to make these dynamic, so your print function can pass in variables for the start row and number of rows.

Preview/Print All

Quite frankly, these options are misleading. In my limited testing, they seem to always only include the first chunk of rows in the grid, no matter how far you have scrolled.

Formatting the Output

You can add a cssFiles property to any of these print functions to apply your own style sheet to format the output.

function printAll(){
    dijit.byId("grid").printGrid({
        title: "Grid - All",
        cssFiles: cssFiles
    });
}
Advertisements

6 responses to “Dojo Data Grid – Part 15: EnhancedGrid Printing”

  1. James Bard says :

    I would love to have the functions in a library, but I get a ‘dijit.byId is undefined’ error. I’ve tried different variations, but I only get the button to work if I put the function right on the button. Google isn’t being much of a help. Are the buttons and grid supposed to be in some dojo container, or in a panel of some dojo type?

    • Brad Balassaitis says :

      In all of the demos I’ve been building, I’ve been putting the functions in Output Script tags, but I don’t see why they couldn’t be in a script library — with one big exception. If you have code that uses the “{id:elementID}” syntax, I’m pretty sure that cannot evaluate properly inside a script library. In that case, you would need to update the library function to accept the element’s ID and update the button that calls it to evaluate the ID and pass it into the library function at runtime.

  2. Pedro says :

    hi brad, i wonder if you recently had some kind of issues rendering an enhanced grid on firefox 25. i have this error “TypeError: node.getAttribute is not a function”

    • Brad Balassaitis says :

      I have not noticed that issue.

      • Pedro says :

        hehe i noticed because a client told me he can’t see a thing on firefox, so by the moment we share a link with an older version of firefox and suggest install it. thats sucks, but i can’t find why is the reason of the issue. i read a lot of articles but no succes.

  3. Ram Medam says :

    Hi Brad, In my page, i have multiple title panes and in each title pane i have one enhanced grid . Now i have to print all data on the page (all grids ) ? is there a way we can achieve this?

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: