1. Home
  2. Forum
  3. Blazor
  4. how to print multipal grids on one page

how to print multipal grids on one page

hello, Is it possible  to print multipal grids on one page?.
please let me know if possible how.

3 Replies 1 reply marked as answer
JP Jeevakanth Palaniappan Syncfusion Team August 6, 2020 10:36 AM UTC

Hi Aleqsandre, 
 
We have validated your query and we didn’t have inbuilt support to print multiple grids in a page. So we have customized by overriding the print method of the grid in a button click. To achieve this you need to refer the interop.js which is attached in the sample in Host.cshtml . Please refer the below code snippet and the attached sample for your reference. 
 
Host.cshtml 
 
<head> 
    .. 
    <script src="~/interop.js"></script> 
    .. 
</head> 
 
Interop.js 
 
window.gridfn = function(){ 
       sfBlazor.Grid.printGrid = function(e){ 
              var printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no'); 
              .. 
              .. 
       sf.base.print(e, printWind); 
       };  
} 
 
Index.razor 
 
<button @onclick="BtnClick">Print</button> 
 
<SfGrid @ref="DataGrid1" DataSource="@Orders" ID="Grid1"> 
..  
<SfGrid> 
 
 
 
<SfGrid DataSource="@Orders" ID="Grid2"> 
.. 
</SfGrid> 
 
@code{ 
private async Task BtnClick() 
{ 
   await JsRuntime.InvokeAsync<object>("gridfn");// This will override the default print function in the grid. Headers are customized here. 
   await DataGrid1.Print(); 
} 
} 
 
 
 
 
Please refer the below screenshot which has both the grids in the print window. 
 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Jeevakanth SP. 


Marked as answer
AL Aleqsandre August 7, 2020 05:20 AM UTC

thank you for answer.

I would like to know if possible how to fit all columns on one page and remove the toolbar while printing multipal grids. when i print multipal grids with your above provided code, first grid doesn't have toolbar but other ones do.


JP Jeevakanth Palaniappan Syncfusion Team August 10, 2020 01:53 PM UTC

Hi Aleqsandre, 
 
Query 1: How to fit all columns in a single page while printing 
 
We suggest you to modify the scale option in the print panel. Please refer the below documentation for your reference. 
 
 
Query 2: How to remove the toolbar while print 
 
We suggest you to implement the below code in the printGrid method of interop.js to remove the toolbar from the second grid. 
 
window.gridfn = function(){ 
              sfBlazor.Grid.printGrid = function(e){ 
                             var printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no'); 
                             printWind.moveTo(0, 0); 
                             var grid2 = document.getElementById('Grid2').cloneNode(true); 
                             grid2.querySelector('.e-content').style.height='auto'; 
//If any element rendered in second grid is not needed while printing then it can be removed as toolbar removed like below code 
                             var toolbar = grid2.querySelector('.e-toolbar'); 
                             if(toolbar) { 
                                 toolbar.remove(); 
                             } 
                             e.appendChild(grid2); 
                             printWind.resizeTo(screen.availWidth, screen.availHeight); 
                             sf.base.print(e, printWind); 
               }; 
} 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon