Blazor Server App - Print without button

Question

Hello guys,

I have a component as follows;

 @using IMS.CoreBusiness  
      
    @inject NavigationManager NavigationManager  
      
    @if (Customer != null)  
    {  
        <tr>  
            <td>@Customer.Name</td>  
            <td>@Customer.TaxNumber</td>  
            <td>@Customer.TaxAdministration</td>  
            <td>@Customer.PhoneNumber</td>  
            <td>@Customer.Email</td>  
            <td>@Customer.Address</td>  
            <td>@Customer.DeliveryAddress</td>  
            <td>@Customer.MainResponsibleName</td>  
            <td>@Customer.AssistantResponsibleName</td>  
            <td>  
                <button type="button" class="btn btn-light" @onclick="() => EditCustomer(Customer.CustomerId)">Edit</button>  
            </td>  
      
        </tr>  
    }  
      
      
    @code {  
        [Parameter]  
        public Customer? Customer { get; set; }  
      
        private void EditCustomer(int cusId)  
        {  
            NavigationManager.NavigateTo($"/editcustomer/{cusId}");  
        }  
    }  

And here is my print preview;

I wonder if there is a way not to print the edit button? If not, I have to implement a separate report for this.

Answer 1

Hi @Cenk ,

The html render code requires a certain response time. JS interop calls will not wait for the html render. You can add a delay to achieve your requirement:

private async void PrintReport()  
{  
    ShowEdit = false;  
    await Task.Delay(1000);   
    JSRuntime.InvokeVoidAsync("print");  
}  

If you also need redisplay the edit button after printing, you need change your code:

    private async void PrintReport()  
    {  
        ShowEdit = false;  
        await Task.Delay(1000);   
        JSRuntime.InvokeVoidAsync("printInvoke");  
        ShowEdit  = true;  
        InvokeAsync(() => StateHasChanged());  
    }  

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,
Rena

Answer 2

Just add a parameter that suppresses the button.

Answer 3

define parameter showEdit and a simple if :

@if (showEdit) {  
                <button type="button" class="btn btn-light" @onclick="() => EditCustomer(Customer.CustomerId)">Edit</button>  
}  
  

Answer 4

I put showEdit parameter as you suggested @Bruce (SqlWork.com) ;

 <td>  
            @if (ShowEdit)  
            {  
                <button type="button" class="btn btn-light" @onclick="() => EditCustomer(Customer.CustomerId)">Edit</button>  
            }  
              
        </td>  
  
    </tr>  
}  
  
  
@code {  
    [Parameter]  
    public Customer? Customer { get; set; }  
  
    [Parameter]  
    public bool ShowEdit { get; set; } = true;  

And set it false on button click but still displays edit button in the report.

<tbody>  
            @foreach (var cus in this._listCustomers)  
            {  
                <CustomerItemComponent Customer="cus" ShowEdit="ShowEdit"></CustomerItemComponent>  
            }  
        </tbody>  
@code {  
    private List<Customer>? _listCustomers;  
    private bool ShowEdit = true;  
  
    protected override async Task OnInitializedAsync()  
    {  
         
        var ven = await ViewCustomersByNameUseCase.ExecuteAsync();  
  
        this._listCustomers = ven.ToList();  
    }  
  
    private void OnSearchCustomers(List<Customer> vendors)  
    {  
        _listCustomers = vendors;  
    }  
  
    private void AddCustomer()  
    {  
        NavigationManager.NavigateTo("/addcustomer");  
    }  
    private void PrintReport()  
    {  
        ShowEdit = false;  
        JSRuntime.InvokeVoidAsync("print");  
    }  

Answer 5

How to get back edit button after print @Rena Ni - MSFT ?