1. Home
  2. Forum
  3. Blazor
  4. logo on printed page

logo on printed page

Hi,
 
I was using print property of Datagrid to print the data in grid. I would like to know whether i can add a logo on top of the page on printing along with the table data.

Thanks Regards, 
Smisha Alias

7 Replies 1 reply marked as answer
RN Rahul Narayanasamy Syncfusion Team January 6, 2021 02:35 PM UTC

Hi Smisha, 

Greetings from Syncfusion. 

Query: I would like to know whether i can add a logo on top of the page on printing along with the table data.  

We have validated your query and we have achieved this requirement by calling a JavaScript function using Microsoft.JSInterop. In the OnToolbarClick event handler of Grid, we have called the JavaScript code to add image and called the Grid’s Print() method to perform print action in Grid. We have prepared a sample based on this scenario, please download the sample form the link below, 
 
 
[Index.razor] 
@inject IJSRuntime JsRuntime 
@using Syncfusion.Blazor.Grids 
 
<SfGrid @ref="DataGrid" DataSource="@Orders" ID="Grid" Toolbar="@ToolBarItems"> 
    <GridEvents TValue="Order" OnToolbarClick="ToolbarClickHandler"></GridEvents> 
    <GridColumns> 
        . ..  
    </GridColumns> 
</SfGrid> 
 
@code{ 
 
    private List<object> ToolBarItems = new List<object>() { "Print" }; 
 
    . . . 
 
    private async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) 
    { 
        if (args.Item.Id == "Grid_print") 
        { 
            await JsRuntime.InvokeAsync<object>("gridfn");// This will override the default print function in the grid. Headers are customized here. 
            await DataGrid.Print(); 
        } 
    } 
 
    . . . 
} 
[interop.js] 
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); 
                              //create the elements 
                              var img = document.createElement("img"); 
                              img.src = '. . .';    // refer the image in here 
                              img.width = "500"; 
                              img.height = "500"; 
                              //append content for the elements 
                              addPrintImg = img.cloneNode(true); 
                              //append the created elements to the print window 
                              e.insertBefore(addPrintImg, e.childNodes[0]); 
                              printWind.resizeTo(screen.availWidth, screen.availHeight); 
                              sf.base.print(e, printWind); 
               }; 
} 
[_Host.cshtml] 
<head> 
    . .. 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" /> 
    <link rel='nofollow' href="css/site.css" rel="stylesheet" /> 
    <script src="~/interop.js"></script> 
</head> 
  
Please let us know if you have any concerns. 
 
Regards, 
Rahul 


SA Smisha Alias January 6, 2021 04:25 PM UTC

Thanks

RN Rahul Narayanasamy Syncfusion Team January 7, 2021 04:46 AM UTC

Hi Smisha, 
 
Thanks for the update. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


KI Krasimir Ivanov January 12, 2023 10:50 PM UTC

Hello,

This used to work correctly but after updating from 19.4.0.43 to version 20.3.0.60 it stopped working. Now it just opens a window. This is the code that used to work:

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 img = document.createElement("img");

        img.src = 'images/picture.jpg';

        img.width = "200";

        img.height = "60";


        var imgWrapperDiv = document.createElement("div");

        imgWrapperDiv.className = "mb-3 mt-3 flex flex-row-reverse";

        imgWrapperDiv.appendChild(img);


        e.insertBefore(imgWrapperDiv, e.childNodes[0]);

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


        sf.base.print(e, printWind);

    };

}


NP Naveen Palanivel Syncfusion Team January 16, 2023 05:36 PM UTC

Hi Ivan,


We would like to inform that , Print logo caption is working in syncfusion older version(20.1.0.61). After volume 2 release(20.2.0.36) we made some behavior change. So it does not work. We made  sample for the logo above the Grid while performing print operation in latest version(20.4.0.43). We also attached the snippet code and sample for your reference.


[interop.js] 

 

window.gridfn = function () {

              sfBlazor.Grid.printGrid = function (e) {

                             var Grid = sfBlazor.getCompInstance(e);

                             var printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');

                             printWind.moveTo(0, 0);

                             //create the elements

                             var img = document.createElement("img");

                             img.src = 'back1.jpg';

                             img.width = "500";

                             img.height = "500";

                             //append content for the elements

                             addPrintImg = img.cloneNode(true);

                             //append the created elements to the print window

                             Grid.element.insertBefore(addPrintImg, Grid.element.childNodes[0])

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

                             sf.base.print(Grid.element, printWind);

              };

}




Please let us know if you have any concerns.


Regards,

Naveen Palanivel


Attachment: PrintBlazor_346bd494.zip

Marked as answer
KI Krasimir Ivanov January 16, 2023 07:25 PM UTC

Yes, this fixed the issue. Thank you!


Krasimir


SG Suganya Gopinath Syncfusion Team January 18, 2023 04:34 PM UTC

Ivan, we are glad that the provided solution helped to solve the issue.


Loader.
Up arrow icon