Hi Martin,

  I still have issues with the solution which you have suggested. I have some 15 columns with both horizontal and vertical scroll bars. When i click on print it is not printing the entire grid contents. Even with the file which you have attached it is not printing the entire contents. Is there any other way??? If so pls upload the sample.

Regards,

Suresh A

Hello Suresh A,

Here is my next guess :)

In the attached example you can see that the grid is with scroll bars on screen, but on print it prints the whole grid data.

Little explanation on the example:

1. I removed the "width" and "height" options of the igGrid

2. I defined "div" element in which I put the table placeholder tags for the igGrid

3. I defined css class named "gridContainer" which purpose is to show the scrollbars for the grid

4. I put "gridContainer" class in media screen rule, so this class will only be applied on the screen and not on print

5. Last I added print button which function is to make call to window.print() function

Looking forward for your feedback.

Hope this helps,

Martin Pavlov

Infragistics, Inc.

 Hi Suresh,

Here is sample handler of click event which you will eventually use:

$('#exportButton').click(function (){
    $('<table id="resultTable"></table>').appendTo($('.divContainer'));
    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>' + $('.divContainer').html() + '</tr>');
      printWin.print();
      printWin.close();
    
   });

One you have the data you can clear the divContainer contents which are cloned from the grid data.

Hope that helps,

Hi Martin,

  Any updates on this???

Regards,.

Suresh A

Hi Martin,

The page which you have attached still prints the header and footer.

See my issue is

1. Layout page (Master Page)

2. Page which inherits the layout page. (Ex UserInformation)

3. In the User Information page i have an igrid which displays user information also some other information on the page. Also the grid has both horizontal and vertical scroll bars.

4. User Information page has a print button. On click of print button i need to print Grid contents only.

With the way which you have suggested it will print the page if there are no scroll bars on the grid. It will just ignore the places where we have added the css class to the tags and will print the whole page.

You can verify the same by adding scrollbars to the grid and the try to print it out. It will just print the contents similar to what print screen does.

Kindly provide a solution for the issue which i have reported.

Regards,

Suresh A