Adding print functionality to Data View Web Parts

Hi,
A question I got from a customer today was “How can I add a print button to data view web part which will print all documents in the view?”

Well, we have a product called iMUSH Print that allows you to print selected items/document from out of the box list views, and merge them into one PDF file for easy printing.

But the question remains, how do one connects this print functionality to a data view web part?

Well, lists or libraries, the answer is simple and took me about an hour to create a working POC.
First, lets have a look at out of the box iMUSH print feature in standard library view:

One thing to note, is that you can either use the checkboxes to select items for printing or click the print menu and select what you wish to print in the popup:

Ok, so obviously, this popup “knows” how to get a list of items for print. We will use this parameter to send the items form the DVWP.
Now, to the DVWP in SharePoint Designer:
2 changes are needed in the DVWP,

1. Add a print button HTML just before the <table> tag of the DVWP items:

<img alt="print" src="/_layouts/KWizCom_iMushFeature/ico_imush_print_16px.png"

onclick="KWizCom_DoDVWPPrint('/iMUSH/_layouts/KWizCom_iMushFeature/KWizComPrintList.aspx',

'567836FC-F9B1-4D48-80AC-D637772703D4', '', this.nextSibling);"/>

you will need to replace the url “/iMUSH/” with your real site URL, and the list id ‘5678…’ with your actual list/library GUID.

2. Locate the <tr> tag inside your DVWP items table, and add an “itemid” attribute to it:

<tr itemid="{@ID}">

That’s it for the DVWP.

Next you will have to add some javascript code to your page, anywhere in the page.
My favourite way about it is just adding a content editor web part.
Just insert this JS code:

<script>

function KWizCom_DoDVWPPrint(pageUrl, listId, viewId, dvwpTable)

{

var url = pageUrl + "?ListId=" + listId + "&View=" + viewId + "&ItemId=";

    //get items from dvwp

var items = "";

    for(var i = 0; i < dvwpTable.rows.length; i++)

  if(dvwpTable.rows[i].itemid != undefined)

        {

    if( items != "" ) items += ",";

            items += dvwpTable.rows[i].itemid;

  }

    url += items;

commonShowModalDialog(url,

'dialogHeight:300px;dialogWidth:180px;scroll:true;toolbar:no;status:no;resizable:yes;',

null, null);

}

</script>

and you are done!

Now, you can click print on the DVWP to print all items that are displayed in the web part, even after filtering but the user:




That’s it!

Just remember, this functionality requires a license for iMUSH Print.