When printing out a DataGrid, can I change the Paper size (A4, A5 or A6?)

[Maria]

Hi, 

I have a Datagrid with some generated QR codes on it which I am printing out. However, one of the user requirements is to be able to print out to either A4, A5 or A6 size paper. Is there a SyncFusion to do this or do I need to resort to Javascript?

Also, as well as the contents of the DataGrid, I also need to include some HTML afterwards in the printout. Do I need to use Javascript again or could I print everything in one go using a Diagram rather than a DataGrid?

Thank you,

Maria

[Jeevakanth Palaniappan]

Hi Maria, 

Greetings from Syncfusion support. 

Query : can I change the Paper size (A4, A5 or A6?) 

 

We have validated your query and we suggest you to refer the below documentation for your reference on changing page size. 

Documentation: 

https://blazor.syncfusion.com/documentation/datagrid/print 

https://blazor.syncfusion.com/documentation/datagrid/print#page-setup 

Demo 

https://blazor.syncfusion.com/demos/datagrid/print?theme=bootstrap5 

Query : Also, as well as the contents of the DataGrid, I also need to include some HTML afterwards in the printout 

You can use the column template feature to render your HTML elements in the grid and to print it. Please refer the below documentation for your reference. 

https://blazor.syncfusion.com/documentation/datagrid/columns#column-template 

Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP. 

[Maria]

Hi, regarding the 2nd query - what I mean is to have an extra row at the bottom of my grid that contains entirely generated HTML. This would extend across all columns. Is that possible? If I have to resort to Javascript, please could you show me how as everything I have tried today has failed. 

[Jeevakanth Palaniappan]

Hi Maria, 

We have attached a sample based on your scenario to render a new row in the grid and to print the grid, we have customized the print functionality and also you have to use the Print method. Please find the code snippet and the sample for your reference. 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1449425244-961809745 

 

@using Syncfusion.Blazor.Grids 

@using Syncfusion.Blazor.Inputs 

@inject IJSRuntime RunTime 

 

<button @onclick="BtnClick">Print</button> 

 

<SfGrid @ref="DataGrid" ID="Grid" DataSource="@Orders"> 

<GridEvents TValue="Order" DataBound="DataBoundHandler"></GridEvents> 

<GridColumns> 

    <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true"  TextAlign="TextAlign.Right"  Width="140"></GridColumn> 

    <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name"  Width="150"> 

    </GridColumn> 

</GridColumns> 

</SfGrid> 

 

@code{ 

    public List<Order> Orders { get; set; } 

    SfGrid<Order> DataGrid {get;set;} 

        private async Task BtnClick() 

    { 

        await RunTime.InvokeAsync<object>("gridfn"); 

        await DataGrid.Print(); 

    } 

    public async Task DataBoundHandler() 

    { 

        await RunTime.InvokeAsync<object>("RenderHTMLRow", "Grid"); 

    } 

} 

Javascript.js 

function RenderHTMLRow(gridId) { 

       var row = document.createElement('tr'); 

       var cell = document.createElement('td'); 

       cell.innerText = "new row"; 

       row.appendChild(cell); 

//append your customized HTML row here 

    var grid = document.getElementById(gridId); 

    grid.querySelector('.e-gridcontent').appendChild(row); 

} 

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 row = document.createElement('tr'); 

              var cell = document.createElement('td'); 

              cell.innerText = "new row"; 

              row.appendChild(cell); 

              var table = e.querySelector(".e-gridcontent table"); 

//append the customized row to the grid based on your scenario 

              table.querySelector('tbody').appendChild(row) 

              printWind.resizeTo(screen.availWidth, screen.availHeight); 

              sf.base.print(e, printWind); 

       }; 

       var old = sfBlazor.Grid.printGrid; 

} 

Host.cshtml 

<head> 

    <script src="~/JavaScript.js"></script> 

</head> 

Regards, 

Jeevakanth SP. 

[Maria]

Thank you, I will try this tomorrow and let you know how I get on.

[Jeevakanth Palaniappan]

Hi Maria, 

Thanks for the update. We will wait for you to check it. 

Regards, 

Jeevakanth SP. 

[Maria]

Hi Jeevakanth,  that did exactly as you said it would. instead of some text to be displayed, I need to display a HTML form so I changed it from cell.innerText to cell.innerHTML and it looks OK so far. 

I need to do some more experimenting but thank you

[Maria]

Hi Jeevakanth, is it possible to pass in some additional parameters to the sfBlazor.Grid.printGrid Javascript function?

[Jeevakanth Palaniappan]

Hi Maria, 

We have override the default function to do your customization. So it is not possible to pass parameters to the sfBlazor.Grid.printGrid function. 

 

Regards, 

Jeevakanth SP.