Yes i want to print all the rows in the grid. I have not enabled paging in my grid.

Hi Todor,

   $('#exportButton').click(function (){

    $('<table id="resultTable"></table>').appendTo($('#printgrid2'));
    var rows = $('#grid2').igGrid('allRows');
    rows.each(function(index, element) {
     var rowData = $(this).clone();
     var currentRow = '<tr>' + $(rowData ).html() + '</tr>';
     $(currentRow ).appendTo($('#resultTable'));
    });
        var printWin = window.open("", "Printable", " location=no, toolbar=no, titlebar=no, resizable=no, status=no, menubar=no");
      printWin.document.open();
      printWin.document.write('<table>' + $('#printgrid2').html() + '</tr>');
      printWin.print();
      printWin.close();
    
   });

<div id="printgrid2"></div>

<input type="button"  value="exportButton" id="exportButton" onclick="exportButton();"/>

I have implemented like above but the thing is i am not getting when do i need to clear the div container. Also in the code you have mentioned .divContainer i have replaced it with printgrid2 let me know is this correct or not. Also if i need to get the headers printed on top then what do i need to do. Also how do i get the borders for ts since we have only table and tr tags in itl PLs correct me if i am wrong.

Regards,

Suresh A

Any updates on this?

Regards,

Suresh A

Hi Suresh,

Here is the complete code of the handler:

   $('#exportButton').click(function (){
    var finalTable = $("#grid2").igGrid("headersTable");
    $(finalTable).attr('id', 'finalTable');
    $('#finalTable').appendTo($('#printgrid2'));
    var rows = $('#grid2').igGrid('allRows');
    rows.each(function(index, element) {
     var row = $(this).clone();
     var completeRow = '<tr>' + $(row).html() + '</tr>';
     $(completeRow).appendTo($('#finalTable'));
    });
        var printWin = window.open("", "Printable", " location=no, toolbar=no, titlebar=no, resizable=no, status=no, menubar=no");
      printWin.document.open();
      printWin.document.write('<table>' + $('#finalTable').html() + '</tr>');
      //You can clear the div container here
      $('#printgrid2').empty();
      printWin.print();
   });

If you use this approach this binding "onclick="exportButton();"" could be removed as jQuery will attach the handler to the click event

Thanks,

Hi,

  If i use the above code it clears the headers of the grid itself. Also it just opens a popup window and a blank screen is displayed. But when i see the source of the popup i can see the grid details. Let me know what can i do for that?

Regards,

Suresh A

Also FYI i am using row template to build the grid.

Regards,

Suresh A

Hi,

Thank you for solving my problem with paginated tables.
If you want to have styles for the table I want to print, as it should?
Thanks in advance.

Best Regards.

Hi,

I have a solution which assumes that the whole data is available in the browser i.e. grid is not configured to use remote paging.

The idea is to get the data form the grid data source object and then use it to generate new table with the whole data in it. The original igGrid is not touched. CSS media rules are used to hide the original igGrid when in @media print and show the generated one and vice versa in @media screen mode. If you use a custom button for printing you can delay the generation of the print table until the button is clicked. If you want user to be able to use the browser "Print" button then you should generate the print table after you create the igGrid.

The downside of this method is that you should keep an extra TABLE element in the DOM. If there are too many records in the data source then this may degrade the performance of the page.

Attached you can find a reference implementation of the described method. I used custom button for printing in order to show you a workaround for Internet Explorer. Internet Explorer doesn't like  generating the print table on demand before printing. That's why I use conditional comments for IE in order to workaround the problem.

P.S.: It doesn't make sense to use remote paging in case that you want to print the whole data. That's why I didn't cover that scenario.

Hope this helps,

Martin Pavlov

Infragistics, Inc.

Hi,

I have a question similar to this post resolved.

How could we get all the data in the table if the grid is paged? If the grid is paged, we can only access the data of the displayed page. Will print only the current page data. Thanks in advance.

Best Regards

I have uploaded a sample code and the issue which i am facing. Kindly have a look at it and provide me a solution for the same.

Regards,

Suresh A