Pages

Friday, July 13, 2012

Print Functionality of List Vew Webpart in SharePoint

Hello Friends

User wants to print the available listitems of a list from a ListViewWebpart in a page and they want to print only those records rather than entire page content (Left Navigation, breadcrumbs etc.) .

So we could not provide the "print" functionality from the browser so we have to include below javascript inside the Content Editor Webpat and now you have print functionality available for ListView webpart only.

Add a content editor webpart on same page where your ListViewWebpart resides.
Write this javascript in the content editor webpart.

<input onclick="javascript:void(PrintWebPart())" type="button" value="Print Page"/> <!-- copy and paste in to a content editor source editor web part --><script language="JavaScript">



<!-- Web Part/region to print -->
var WebPartElementID = "MSO_ContentTable";

//Function to print Web Part
function PrintWebPart()
{
 var bolWebPartFound = false;
 if (document.getElementById != null)
 {
  //Create html to print in new window
  var PrintingHTML = '<HTML>\n<HEAD>\n';
  //Take data from Head Tag
  if (document.getElementsByTagName != null)
   {
   var HeadData= document.getElementsByTagName("HEAD");
   if (HeadData.length > 0)
    PrintingHTML += HeadData[0].innerHTML;
   }
  PrintingHTML += '\n</HEAD>\n<BODY>\n';
  var WebPartData = document.getElementById(WebPartElementID);
  if (WebPartData != null)
  {
   PrintingHTML += WebPartData.innerHTML;
   bolWebPartFound = true;
  }
  else
  {
   bolWebPartFound = false;
   alert ('Cannot Find Web Part');
  }
 }
 PrintingHTML += '\n</BODY>\n</HTML>';
 //Open new window to print
 if (bolWebPartFound)
 {
  var PrintingWindow = window.open("","PrintWebPart", "toolbar,width=800,height=600,scrollbars,resizable,menubar");
  PrintingWindow.document.open();
  PrintingWindow.document.write(PrintingHTML);
  // Open Print Window
  PrintingWindow.print();
 }
}</script>

Now you all set for print the listitems of listviewwebpart in SharePoint Pae.

Disha Shah

11 comments:

  1. Hello Disha,

    This is an excellent post although I am having an issue. I have followed the post and the print button is visible but when I click on it, I see the Title of the webpart but not the content. Am I missing something here?

    Thanks,
    Ricky

    ReplyDelete
    Replies
    1. Hi Ricky

      Thank you for the appreciation!

      Would you please let me know what is the order of the webpart inside the page?which one is first and second?

      1. List webpart
      2. Content Editor Part

      Thanks
      Disha Shah

      Delete
    2. Thanks for the reply.

      Content Editor Webpart is the top one and List webpart is the one below it. Should it be the opposite?

      Delete
    3. I changed the order and that didn't resolve the issue either.

      Thanks,
      Ricky

      Delete
    4. Hi Ricky

      Okay. could you please change this line?
      var WebPartElementID = "MSO_ContentTable";
      to
      1. var WebPartElementID = "ctl00_MSO_ContentDiv";
      2.--if first option does not work then try this
      var WebPartElementID = "onetIDListForm:;

      Let me know if it helps or not

      Thanks
      Disha Shah

      Delete
  2. Hi Ricky

    Okay. could you please change this line?
    var WebPartElementID = "MSO_ContentTable";
    to
    1. var WebPartElementID = "ctl00_MSO_ContentDiv";
    2.--if first option does not work then try this
    var WebPartElementID = "onetIDListForm:;

    Let me know if it helps or not

    Thanks
    Disha Shah

    ReplyDelete
  3. Hi Disha,

    That worked but I was wondering the way it works is that it opens a new page without any side bar and branding etc...which is great. But is it possible that it opens directly the Print box rather than opening the list.

    Cheers,
    Ricky

    ReplyDelete
    Replies
    1. Hi Ricky

      You could not open direclty the print box.

      But you could do one thing when user click "print" or "cancel" from print box ; it will close the list window automatically.
      For that write below line after
      PrintingWindow.print();
      PrintingWindow.close();

      Thanks
      Disha Shah

      Delete
  4. Thanks Disha for all your help.

    ReplyDelete
  5. hello i am using the above script for printing list which is customized in infopath form the new popup is opening with the form which i want to print but popup does not contain the print opeion neither it is automatically printing please help

    ReplyDelete
  6. This will print only page 1, if the list view webpart has paging.

    ReplyDelete