Adding css for printing RadzenDataGrid

Radzen.Blazor Components
1

Hello,
I am currently trying to print a RadzenDataGrid along with its styles and most of them aren't there when printing.

The Grid I am trying to print :

Capture d'écran 2025-07-25 160852
Capture d'écran 2025-07-25 1608521916×681 70.9 KB

The render I get when printing :

Capture d'écran 2025-07-25 160926
Capture d'écran 2025-07-25 1609261914×995 111 KB

I have tried adding styles througth a print.js file wich allow me to print the component I want to but without most of its styles.

print.js file :

// print.js
function printComponent(componentSelector, styles) {
    var elementToPrint = document.querySelector(componentSelector);
    if (elementToPrint) {
        var printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write('<html><head>');
        printWindow.document.write(styles)
        printWindow.document.write('<title>Print pochette</title></head><body>');
        printWindow.document.write(elementToPrint.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.print();
        printWindow.close();
    }
}

print method in component file :

<style>
    :root {
        --rz-grid-header-color: white;
        --rz-grid-header-font-size: 14px;
        --rz-grid-header-font-weight: bold;
        --rz-grid-font-size: 20px;
    }

    .rz-grid-table {
        width: unset;
        text-align: center;
    }

    .rz-grid-table th {
        text-align: center;
    }
</style>

    <Button Color="ButtonColor.Success" @onclick="@(() => PrintComponent("controleOF"))">Imprimer</Button>
    <RadzenDataGrid @ref="OFsGrid" AllowAlternatingRows="false" AllowFiltering="true" AllowPaging="true" PageSize="30" AllowSorting="true"
                Data="@OFs" TItem="OF" ColumnWidth="200px" RowRender="@RowRender" CellRender="@CellRender" HeaderCellRender="@HeaderCellRender" GridLines="@gridLines"
                FilterMode="FilterMode.CheckBoxList" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Density="Density.Compact" id="controleOF">
    </RadzenDataGrid>

I tried passing the styles into the print.js method but it doesn't work.

@code {
        String styles = "<style>
        body {
                color: blue;
                -webkit-print-color-adjust: exact;
        }
        table, th, td {
            font-size:16px;
            text-align: center;
            color: red;
        }
        th {
            background-color: #04AA6D;
            color: white;
        }
        </style>";

    private async Task PrintComponent(string elementId)
    {
        await JSRuntime.InvokeVoidAsync("printComponent", $"#{elementId}", styles);
    }
}

Best regards
Gwendal

2

Alright. So I figured it out on my own and it seems I forgot the basic css @media print wich specifies the styles that need to be printed as well as the !important for the background colors (see this post : https://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color)

string styles = @"<style>
@media print {
    :root{
        --rz-grid-header-color: white;
        --rz-grid-header-font-size: 14px;
        --rz-grid-header-font-weight: bold;
        --rz-grid-font-size: 20px;
    }
    body{
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
        font-family: Arial, sans-serif;
    }
    table {
      font-size: 10px;
      width: unset;
      text-align: left;
      border: 1px solid black;
      border-collapse: collapse;
      max-width:100%;
      white-space:nowrap;

      tr, th, td {
          border: 1px solid black;
          border-collapse: collapse;
      }
      th {
          text-align: center;
          font-size: 12px;
          background-color: #9BC2E6 !important;
      }
        /*...*/
   ";

  string title = "<title>Controle O.F.</title>";
  string header = @"<header><h1>Contrôle O.F.</h1><p>Attente pochette R1 : <span class=""light-red-span"">123456</span></p><p>Attente pochette R2 : <span class=""light-yellow-span"">123456</span></p></header>";

private async Task PrintComponent(string elementId)
{
     string currentDateTime = DateTime.Now.ToString(new CultureInfo("fr-FR"));
     string footer = $"<footer>{currentDateTime}</footer>";
     await JSRuntime.InvokeVoidAsync("printComponent", $"#{elementId}", styles, title, header, footer);
}

Capture d'écran 2025-07-29 150152
Capture d'écran 2025-07-29 1501521911×988 90.5 KB

I also needed to pass a title, header and footer and it appeared not working at first until I opened my page in an incognito tab because of the Blazor caching.

// print.js
function printComponent(componentSelector, styles, title = "", header = "", footer = "") {
    var elementToPrint = document.querySelector(componentSelector);
    if (elementToPrint) {
        var printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write('<html><head>');
        printWindow.document.write(styles)
        printWindow.document.write(title);
        printWindow.document.write('</head><body>');
        printWindow.document.write(header);
        printWindow.document.write(elementToPrint.innerHTML);
        printWindow.document.write(footer);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.print();
        printWindow.close();
    }
}

And if anyone is wondering, I am adding styles with classes trougth the CellRender method

    void CellRender(DataGridCellRenderEventArgs<OF> args)
    {
        if (args.Data.machine == Machine.R1)
        {
            if (args.Column.Title == "R2" || args.Column.Title == "R4" || args.Column.Title == "RR2" || args.Column.Title == "RR4")
            {
                args.Attributes.Add("style", $"background-color: {("var(--rz-info-lighter)")}; --rz-grid-cell-border: 1px solid {("var(--rz-black)")};");
                args.Attributes.Add("class", "light-blue-background");
            }
            //...
        }
        //...
    }
1 Like