Hello friends,
I have a dialog and inside of this dialog, there might be multiple tabs. I want to print only the active tab displayed. Is there a way to do it?
Here is the dialog (I don't want to print Test vendor2 tab)
Here is the dialog page:
@page "/dialogcard/{Order}"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.OrderDetail
@inject IViewOrderDetailsByOrderIdUseCase ViewOrderDetailsByOrderIdUseCase
@inject Radzen.DialogService DialogService
@inject IJSRuntime JsRuntime
@if (orderDetails != null)
{
<div class="row my-4">
<div class="col-md-12">
<div id="printarea">
<RadzenCard>
<h3 class="h5">
Order @Order.OrderId Details
</h3>
<RadzenTabs>
<Tabs>
@{
var detailVendorId = 0;
}
@foreach (var detail in orderDetails)
{
@if (detailVendorId != detail.VendorId)
{
<RadzenTabsItem Text="@detail.Vendor.Name">
<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">
<div>
<div>Responsible</div>
<b>@detail.Vendor.MainResponsibleName</b>
<div class="mt-3">Company</div>
<b>@Order?.CustomerName</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>@(detail?.ShippingNumber), @(detail?.TrackingNumber)</b>
<div class="mt-3">Vendor</div>
<b>@detail?.Vendor.Name</b>
</div>
</div>
</RadzenCard>
</div>
</div>
<div id="wrapper">
<RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text=@($"{String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", orderDetails?.Where(x => x.VendorId == detail.VendorId).Select(x => x.TotalBuyPrice).Sum())}") style="margin-bottom: 5px"/>
</div>
<RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
Data="@orderDetails.Where(x => x.VendorId == detail.VendorId)" TItem="OrderDetail" Class="mt-3">
<Columns>
<RadzenDataGridColumn TItem="OrderDetail" Property="Id" Title="Number" Width="100px"/>
<RadzenDataGridColumn TItem="OrderDetail" Property="ProductCode" Title="Code" Width="130px"/>
<RadzenDataGridColumn TItem="OrderDetail" Property="ProductName" Title="Name" Width="130px"/>
<RadzenDataGridColumn TItem="OrderDetail" Property="Currency" Title="Currency" Width="95px"/>
<RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" Width="95px"/>
<RadzenDataGridColumn TItem="OrderDetail" Property="BuyUnitPrice" Title="Unit Price" Width="95px"/>
<RadzenDataGridColumn TItem="OrderDetail" Property="TotalBuyPrice" Title="Total Price" Width="95px"/>
</Columns>
</RadzenDataGrid>
</RadzenTabsItem>
}
detailVendorId = detail.VendorId;
}
</Tabs>
</RadzenTabs>
</RadzenCard>
</div>
</div>
</div>
}
<div class="row">
<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" />*@
<button type="button" class="btn btn-primary btns" @onclick="PrintDocument">Print</button>
</div>
</div>
@code {
[Parameter] public ReportViewModel Order { get; set; }
IEnumerable<OrderDetail> orderDetails;
protected override async Task OnInitializedAsync()
{
orderDetails = await ViewOrderDetailsByOrderIdUseCase.ExecuteAsync(Order.OrderId);
}
private void PrintDocument()
{
JsRuntime.InvokeVoidAsync("print");
}
}
Here is the print CSS:
@media print {
body * {
visibility: hidden;
}
#printarea, #printarea * {
visibility: visible;
}
#printarea {
position: absolute;
left: 0;
top: 0;
}
@page {
size: A4 landscape;
}
}
There might a something like when I click a tab, it's CSS updated to printarea. I am kindly asking your help.
Thank you.