Hello,
I want to open a dialog as in this example (Blazor Dialog component) but unfortunately, the dialog does not open in my case. (There is no error either.) What may I have missed? I kindly request your help.
Thank you.
Also registered dialog service
builder.Services.AddScoped<DialogService>();
Here is the page I want to open as a dialog
@page "/dialogcard/{OrderID}"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Order
@using IMS.UseCases.Orders
@inject IViewOrderByIdUseCase ViewOrderByIdUseCase
@inject Radzen.DialogService dialogService
<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">
<div class="col-md-12 text-right">
<RadzenButton Click="@((args) => dialogService.Close(false))" ButtonStyle="ButtonStyle.Secondary" Text="Cancel" Style="width: 120px" Class="mr-1" />
<RadzenButton Click="@((args) => dialogService.Close(true))" Text="OK" 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() };
}
}
Here is the page I am triggering dialog
@page "/report"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Customer
@using IMS.UseCases.Interfaces.Order
@using IMS.UseCases.Interfaces.Vendor
@using Microsoft.AspNetCore.Components
@using System.Globalization
@inject ILogger<ExportOrders> Logger
@inject IWebHostEnvironment Environment
@inject IViewAllOrdersUseCase ViewAllOrdersUseCase
@inject IViewAllVendorsUseCase ViewAllVendorsUseCase
@inject IGetOrdersExportUseCase GetOrdersExportUseCase
@inject IViewAllCustomersUseCase ViewAllCustomersUseCase
@inject DialogService DialogService
@implements IDisposable
<style>
.btns {
padding: 5px;
width: calc(13% - 10px);
}
</style>
<h1>Export Orders</h1>
<br/>
<div class="m-4">
<div class="row g-6">
<div class="col-3">
<label class="form-label">Vendor</label>
<RadzenDropDownDataGrid TValue="int" AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"
Data=@_vendors Count="5" TextProperty="Name" ValueProperty="Id" Change=@(args => OnChange(args))
Class="w-100"/>
</div>
<div class="col-3">
<label class="form-label">Order Date Start</label>
<RadzenDatePicker @bind-Value=@startValue DateFormat="d" Class="w-100" Change=@(args => OnStartDateChange(args)) />
</div>
<div class="col-3">
<label class="form-label">Order Date End</label>
<RadzenDatePicker @bind-Value=@endValue DateFormat="d" Class="w-100" Change=@(args => OnEndDateChange(args)) />
</div>
<div class="col-3">
<label class="form-label">Order Status</label>
<RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data=@orderStatusList Name="Status" Change=@(args => OnStatusChange(args))/>
</div>
</div>
<div class="mt-5">
<div class="d-flex flex-grow-1 justify-content-center align-items-center">
<button type="button" class="btn btn-primary btns" @onclick="ExportExcel">
Orders Excel Export
</button>
</div>
</div>
</div>
<RadzenTabs>
<Tabs>
<RadzenTabsItem Text="Order Details">
<RadzenDataGrid @ref="_grid" AllowFiltering="true" AllowPaging="true" PageSize="10" AllowSorting="true" Data="@_orders" TItem="ReportViewModel"
PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced"
AllowVirtualization="true" Style="width: calc(100vw - 100px);" ColumnWidth="170px">
<Columns>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderId" Title="Order ID" Width="100px" />
<RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerName" Title="Customer"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" Width="100px">
<Template Context="ReportViewModel">
@($"{ReportViewModel.OrderDateTime:dd/MM/yyyy}")
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Status" Title="Status" Width="100px"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="DoneBy" Title="Employee"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailId" Title="Product Number"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="ProductCode" Title="Code" Width="100px"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="ProductName" Title="Product" />
<RadzenDataGridColumn TItem="ReportViewModel" Property="VendorName" Title="Vendor" />
<RadzenDataGridColumn TItem="ReportViewModel" Property="Quantity" Title="Quantity" Width="100px"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="BuyUnitPrice" Title="Buy Unit Price"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="CostRatio" Title="Cost Ratio" Width="100px" />
<RadzenDataGridColumn TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost" >
<Template Context="detail">
@switch (detail.Currency)
{
case "Dolar":
@string.Format(new CultureInfo("en-US"), "{0:C}", (detail.BuyUnitPrice * (detail.CostRatio / 100)) + detail.BuyUnitPrice)
break;
case "Euro":
@string.Format(new CultureInfo("en-FR"), "{0:C}", (detail.BuyUnitPrice * (detail.CostRatio / 100)) + detail.BuyUnitPrice)
break;
default:
@string.Format(new CultureInfo("tr-TR"), "{0:C}", (detail.BuyUnitPrice * (detail.CostRatio / 100)) + detail.BuyUnitPrice)
break;
}
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TotalBuyPrice" Title="Total Buy" Width="100px">
<Template Context="detail">
@switch (detail.Currency)
{
case "Dolar":
@string.Format(new CultureInfo("en-US"), "{0:C}", detail.BuyUnitPrice * detail.Quantity)
break;
case "Euro":
@string.Format(new CultureInfo("en-FR"), "{0:C}", detail.BuyUnitPrice * detail.Quantity)
break;
default:
@string.Format(new CultureInfo("tr-TR"), "{0:C}", detail.BuyUnitPrice * detail.Quantity)
break;
}
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="SellUnitPrice" Title="Sell Unit" />
<RadzenDataGridColumn TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell" >
<Template Context="detail">
@switch (detail.Currency)
{
case "Dolar":
@string.Format(new CultureInfo("en-US"), "{0:C}", detail.Quantity * detail.SellUnitPrice)
break;
case "Euro":
@string.Format(new CultureInfo("en-FR"), "{0:C}", detail.Quantity * detail.SellUnitPrice)
break;
default:
@string.Format(new CultureInfo("tr-TR"), "{0:C}", detail.Quantity * detail.SellUnitPrice)
break;
}
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="ShippingNumber" Title="Shipping" />
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailStatus" Title="Status" />
<RadzenDataGridColumn TItem="ReportViewModel" Property="TrackingNumber" Title="Tracking" />
<RadzenDataGridColumn TItem="ReportViewModel" Property="Currency" Title="Currency" Width="100px" />
<RadzenDataGridColumn TItem="ReportViewModel" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px">
<Template Context="order">
<RadzenButton Icon="print" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => OpenOrder(order.OrderId))">
</RadzenButton>
</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
</RadzenTabsItem>
</Tabs>
</RadzenTabs>
@code {
RadzenDataGrid<ReportViewModel?> _grid;
DateTime? startValue = DateTime.Now.Date;
DateTime? endValue = DateTime.Now.Date;
DateTime? _startDate;
DateTime? _endDate;
string? _status;
int _vendorId;
int orderID;
readonly List<string> orderStatusList = new() { "Completed", "Cancelled", "Continues" };
IEnumerable<ReportViewModel?> _orders = new List<ReportViewModel?>();
IEnumerable<Vendor?> _vendors = new List<Vendor?>();
IEnumerable<Customer?> _customers;
protected override async Task OnInitializedAsync()
{
_orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate);
_vendors = await ViewAllVendorsUseCase.ExecuteAsync();
_customers = await ViewAllCustomersUseCase.ExecuteAsync();
//_grid.OrderBy("OrderId");
}
public void Dispose()
{
// The DialogService is a singleton so it is advisable to unsubscribe.
DialogService.Dispose();
}
void OnChange(object vendor)
{
_vendorId = Int32.Parse(vendor.ToString());
}
void OnStartDateChange(DateTime? value)
{
if(value != null){
_startDate = value;
}else{
_startDate = null;
}
}
void OnEndDateChange(DateTime? value)
{
if (value != null)
{
_endDate = value;
}
else
{
_endDate = null;
}
}
void OnStatusChange(object status){
if(status != null){
_status = status.ToString();
}else{
_status = null;
}
}
private async Task ExportExcel()
{
_orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate);
}
private async Task OpenOrder(object args)
{
orderID = Int32.Parse(args.ToString());
await DialogService.OpenAsync<DialogCardPage>($"Order {orderID}",
new Dictionary<string, object>() { { "OrderID", orderID } },
new DialogOptions() { Width = "700px", Height = "570px", Resizable = true, Draggable = true });
}
}