1. Home
  2. Forum
  3. Blazor
  4. Blazor Datagrid Print Title/Caption

Blazor Datagrid Print Title/Caption

Is there a way to put a title/caption on the datagrid default printout?

Because right now it will just print the headers and rows only.

I can't find a way to put a title on the printout that I can customize to tell what data it is.


6 Replies 1 reply marked as answer
RN Rahul Narayanasamy Syncfusion Team March 15, 2022 01:35 PM UTC

Hi Noel, 

Greetings from Syncfusion. 

You want to add the title above the Grid while performing print operation. Here, we have overridden the our default print method to include the title to Print page. In toolbarClick event, we have called a JS function using JSInterop to add title to page and Called print method to print the Grid page. Refer the below code example, 
 
[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> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    . ..  
 
    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 title = document.createElement("div"); 
                                title.innerHTML = "Title: Print Grid"; 
                                title.style.fontSize = "40px"; 
                                title.style.height = "100px"; 
                                title.style.textAlign = "center"; 
 
                                addPrintEle = title.cloneNode(true); 
                                e.insertBefore(addPrintEle, 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 


Marked as answer
ND Noel Dacara replied to Rahul Narayanasamy March 16, 2022 10:45 AM UTC

Great, this works! I also added a reportTitle parameter on the javascript function so I could use it on different reports.

Hoping this would just be a grid property in the future :)


RN Rahul Narayanasamy Syncfusion Team March 18, 2022 02:11 PM UTC

Hi Noel, 

Thanks for the update. 

We are happy to hear that the provided solution was helpful to achieve your requirement. Please get back to us if you need further assistance. 

Regards, 
Rahul 


PS Pravat Sahoo November 29, 2022 11:37 AM UTC

Hi Team,


https://www.syncfusion.com/forums/173642/blazor-datagrid-print-title-caption option not working in syncfusion version - 20.3.0.56.


Print title caption is working in syncfusion older vresion - 19.0, After, upgrading to the version  20.3.0.56  facing the issue. 

sfBlazor.Grid.printGrid = function(e){ -> e is coming like below image in the upgraded version.

sferror.png


NP Naveen Palanivel Syncfusion Team December 1, 2022 03:15 AM UTC

Hi Pravat,  


We are currently Validating  the reported query at our end and we will update the further details shortly. Until then we appreciate your patience.


Regards,

Naveen Palanivel


NP Naveen Palanivel Syncfusion Team December 9, 2022 09:29 AM UTC

Hi Pravat,


Thanks for the Patient,


We would like to inform that , Print title 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 title above the Grid while performing print operation in latest version(20.3.0.60). 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 title = document.createElement("div");

                             title.innerHTML = "Title: Print Grid";

                             title.style.fontSize = "40px";

                             title.style.height = "100px";

                             title.style.textAlign = "center";

                             addPrintEle = title.cloneNode(true);

 

                             Grid.element.insertBefore(addPrintEle, 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: TitlePrint_e79b841b.zip

Loader.
Up arrow icon