javascriptjqueryblazor-server-sideradzen

Printing Modal Dialog Problem - output does not appear on the print preview screen

I am trying to print (PDF) a modal dialog on my Blazor Server Application. The modal dialog opens but unfortunately, the output does not appear on the print preview window. How can I print a modal dialog? Is there something I missed, I kindly request your help?

Here is the Radzen Modal Dialog: enter image description here

Here is the empty print preview window: enter image description here

Dialog razor:

@page "/dialogcard/{OrderID}"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Order
@using IMS.UseCases.Orders
@inject IViewOrderByIdUseCase ViewOrderByIdUseCase
@inject Radzen.DialogService DialogService
@inject IJSRuntime JsRuntime


<div class="row">
    <div class="col-lg-6 d-flex">
        <RadzenCard Style="width: 100%; overflow: hidden;">
            <h3 class="h5">Contact</h3>
            <div class="d-flex flex-row">
                @*<RadzenImage Path="@order?.DoneBy" Class="rounded-circle float-left mt-1 mr-3" Style="width: 90px; height: 90px;" />*@
                <div>
                    <div>Employee</div>
                    <b>@order?.DoneBy</b>
                    <div class="mt-3">Company</div>
                    <b>@order?.Customer?.Name</b>
                </div>
            </div>
        </RadzenCard>
    </div>
    <div class="col-lg-6 d-flex">
        <RadzenCard Style="width: 100%; overflow: hidden;">
            <h3 class="h5">Delivery Information</h3>
            <div class="row">
                <div class="col">
                    <div>Address</div>
                    <b>@(order?.OrderDetails?.Where(od => od.OrderId == OrderID).Select(x => x.ShippingNumber)), @(order?.OrderDetails?.Where(od => od.OrderId == OrderID).Select(x => x.TrackingNumber))</b>
                    <div class="mt-3">Vendor</div>
                    <b>@(order?.OrderDetails?.Where(od => od.OrderId == OrderID).Select(x => x.Vendor.Name))</b>
                </div>
            </div>
        </RadzenCard>
    </div>
</div>
<div class="row my-4">
    <div class="col-md-12">
        <RadzenCard>
            <h3 class="h5">
                Order @OrderID Details
                <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text=@($"{String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order?.OrderDetails?.Where(od => od.OrderId == OrderID).Select(x => x.TotalBuyPrice))}") Class="float-right" />
            </h3>
            <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                            Data="@(orderDetails?.Where(o => o.Order?.Id == OrderID))" TItem="OrderDetail" ColumnWidth="200px" Class="mt-3">
                <Columns>
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Order.OrderDate" Title="Order Date" />
                    <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
                </Columns>
            </RadzenDataGrid>
        </RadzenCard>
    </div>
</div>
<div class="row hideWhenPrint">
    <div class="col-md-12 text-right">
        <RadzenButton Click="@((args) => DialogService.Close(false))" ButtonStyle="ButtonStyle.Secondary" Text="Close" Style="width: 120px" Class="mr-1" />
        <RadzenButton Click="PrintDocument" Text="Print" Style="width: 120px" />
    </div>
</div>

@code {
    [Parameter] public int OrderID { get; set; }

    Order? order;
    IEnumerable<OrderDetail> orderDetails;
    IList<Order?> SelectedOrders { get; set; }
    IEnumerable<Order?> _orders = new List<Order?>();

    protected override async Task OnInitializedAsync()
    {
        order = await ViewOrderByIdUseCase.ExecuteAsync(OrderID);
        SelectedOrders = new List<Order?> { _orders.FirstOrDefault() };
    }
    private async Task PrintDocument(){
        await JsRuntime.InvokeVoidAsync("Print");
    }
}

Here is my print js:

function Print() {
    $(".hideWhenPrint").hide();
       window.print();
    $(".hideWhenPrint").show();
}

Here is the _Layout.cshtml:

@using Microsoft.AspNetCore.Components.Web
@namespace IMS.WebApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base href="~/"/>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
    <link href="css/site.css" rel="stylesheet"/>
    <link href="IMS.WebApp.styles.css" rel="stylesheet"/>
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
    <link href="css/sidebars.css" rel="stylesheet"/>

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>

</head>
<body>
@RenderBody()

<div id="blazor-error-ui">
    <environment include="Staging,Production">
        An error has occurred. This application may no longer respond until reloaded.
    </environment>
    <environment include="Development">
        An unhandled exception has occurred. See browser dev tools for details.
    </environment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

<script src="_framework/blazor.server.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script src="~/jquery/jquery.min.js"></script>
<script src="~/bootstrap/js/bootstrap.min.js"></script>
<script src="~/js/myjs.js"></script>

<script>
    window.downloadFileFromStream = async (fileName, contentStreamReference) => {
        const arrayBuffer = await contentStreamReference.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        const anchorElement = document.createElement('a');
        anchorElement.href = url;
        anchorElement.download = fileName ?? '';
        anchorElement.click();
        anchorElement.remove();
        URL.revokeObjectURL(url);
    }
</script>
</body>
</html>

Edit1

I checked with Chrome developer tools and after I click the print button on the dialog, it gives this error on the console.

Unchecked runtime.lastError: The message port closed before a response was received.
Solution

  • As it is suggested, I post this as a separate answer.

    Adding <div id="printarea"> around the <div class="row"> of the dialog razor and using this CSS in the site.css solved my issue.

    @media print {
    body * {
        visibility: hidden;
    }
    #printarea, #printarea * {
        visibility: visible;
    }
    #printarea {
        position: absolute;
        left: 0;
        top: 0;        
    }    
}