Radzen Dialog Parameter

Radzen.Blazor Components
1

Hello, good time
Referring to the topic below

it is ok if first dialog parameters type are variable type such as (int,long,strting, ...) after close second dialog, parameters of first dialog are not empty but if first dialog parameters type is an object such as Order or Customer after close second dialog, parameters of first dialog set as empty.

If, in the mentioned example, the Order class is sent as a parameter instead of the OrderID parameter, the Order parameter will be empty after the second dialog is closed.

thanks

2

Here is the same with Order passed as parameter instead OrderID:

DialogWithPage.razor

@using Microsoft.JSInterop
@using System.Text.Json
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage

@inject DialogService DialogService
@inject IJSRuntime JSRuntime

<div class="rz-p-12 rz-text-align-center">
    <RadzenButton Text=@($"Order {orderID} details") ButtonStyle="ButtonStyle.Secondary" Click=@OpenOrder />
</div>

@code {
    int orderID = 10248;

    public async Task OpenOrder()
    {
        await LoadStateAsync();

        var order = dbContext.Orders.Where(o => o.OrderID == orderID)
                          .Include("Customer")
                          .Include("Employee").FirstOrDefault();

        await DialogService.OpenAsync<DialogCardPage>($"Order {orderID}",
               new Dictionary<string, object>() { { "Order", order } },
               new DialogOptions() 
               {
                   Resizable = true, 
                   Draggable = true,
                   Resize = OnResize,
                   Drag = OnDrag,
                   Width = Settings != null ? Settings.Width : "700px", 
                   Height = Settings != null ? Settings.Height : "512px",
                   Left = Settings != null ? Settings.Left : null, 
                   Top = Settings != null ? Settings.Top : null
                });

        await SaveStateAsync();
    }

    void OnDrag(System.Drawing.Point point)
    {
        JSRuntime.InvokeVoidAsync("eval", $"console.log('Dialog drag. Left:{point.X}, Top:{point.Y}')");

        if(Settings == null)
        {
            Settings = new DialogSettings();
        }

        Settings.Left = $"{point.X}px";
        Settings.Top = $"{point.Y}px";

        InvokeAsync(SaveStateAsync);
    }

    void OnResize(System.Drawing.Size size)
    {
        JSRuntime.InvokeVoidAsync("eval", $"console.log('Dialog resize. Width:{size.Width}, Height:{size.Height}')");

        if(Settings == null)
        {
            Settings = new DialogSettings();
        }

        Settings.Width = $"{size.Width}px";
        Settings.Height = $"{size.Height}px";

        InvokeAsync(SaveStateAsync);
    }

    DialogSettings _settings;
    public DialogSettings Settings 
    { 
        get
        {
            return _settings;
        }
        set
        {
            if (_settings != value)
            {
                _settings = value;
                InvokeAsync(SaveStateAsync);
            }
        }
    }

    private async Task LoadStateAsync()
    {
        await Task.CompletedTask;

        var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "DialogSettings");
        if (!string.IsNullOrEmpty(result))
        {
            _settings = JsonSerializer.Deserialize<DialogSettings>(result);
        }
    }

    private async Task SaveStateAsync()
    {
        await Task.CompletedTask;

        await JSRuntime.InvokeVoidAsync("window.localStorage.setItem", "DialogSettings", JsonSerializer.Serialize<DialogSettings>(Settings));
    }

    public class DialogSettings
    {
        public string Left { get; set; }
        public string Top { get; set; }
        public string Width { get; set; }
        public string Height { get; set; }
    }
}

DialogCardPage.razor

@page "/dialogcard/{OrderID}"

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage
@inject Radzen.DialogService dialogService

<RadzenStack Gap="1rem" Orientation="Orientation.Vertical" JustifyContent="JustifyContent.SpaceBetween" Style="height: 100%;">
    <RadzenStack>
    <RadzenRow>
        <RadzenColumn Size="12" SizeMD="6" class="rz-p-4 rz-border-radius-1" Style="border: var(--rz-grid-cell-border)">
            <RadzenText TextStyle="TextStyle.Subtitle1">Contact</RadzenText>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                <RadzenImage Path="@order.Employee?.Photo" Style="width: 80px; height: 80px; border-radius: 50%" AlternateText="@(order.Employee?.FirstName + " " + order.Employee?.LastName)" />
                <RadzenStack Gap="0" class="rz-text-truncate">
                    <RadzenText TextStyle="TextStyle.Overline" class="rz-mt-2 rz-my-0" Style="color: var(--rz-text-tertiary-color);">Employee</RadzenText>
                    <RadzenText TextStyle="TextStyle.Body1" class="rz-text-truncate"><b>@(order?.Employee?.FirstName + " " + order?.Employee?.LastName)</b></RadzenText>
                    <RadzenText TextStyle="TextStyle.Overline" class="rz-mt-4 rz-mb-0" Style="color: var(--rz-text-tertiary-color);">Company</RadzenText>
                    <RadzenText TextStyle="TextStyle.Body1" class="rz-text-truncate"><b>@order.Customer?.CompanyName</b></RadzenText>
                </RadzenStack>
            </RadzenStack>
        </RadzenColumn>
        <RadzenColumn Size="12" SizeMD="6" class="rz-p-4 rz-border-radius-1" Style="border: var(--rz-grid-cell-border)">
            <RadzenText TextStyle="TextStyle.Subtitle1">Delivery Information</RadzenText>
            <RadzenStack Gap="0" class="rz-text-truncate">
                <RadzenText TextStyle="TextStyle.Overline" class="rz-mt-2 rz-my-0" Style="color: var(--rz-text-tertiary-color);">Address</RadzenText>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-text-truncate"><b>@(order.ShipAddress), @(order.ShipCity), @(order.ShipCountry)</b></RadzenText>
                <RadzenText TextStyle="TextStyle.Overline" class="rz-mt-2 rz-my-0" Style="color: var(--rz-text-tertiary-color);">Ship name</RadzenText>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-text-truncate"><b>@(order.ShipName)</b></RadzenText>
            </RadzenStack>
        </RadzenColumn>
    </RadzenRow>
    <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="AlignItems.Center">
            <RadzenText TextStyle="TextStyle.Subtitle1" class="rz-m-0">Order @Order.OrderID Details</RadzenText>
        <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text=@($"{String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)}")/>
    </RadzenStack>
    <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                Data="@(orderDetails.Where(o => o.OrderID == Order.OrderID))" ColumnWidth="200px" Density="Density.Compact" AllowAlternatingRows="false">
        <Columns>
            <RadzenDataGridColumn Property="@nameof(OrderDetail.Quantity)" Title="Quantity" />
            <RadzenDataGridColumn Property="Order.OrderDate" Title="Order Date" />
            <RadzenDataGridColumn Property="@nameof(OrderDetail.Discount)" Title="Discount" FormatString="{0:P}" />
        </Columns>
    </RadzenDataGrid>
    </RadzenStack>
    <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="0.5rem">
        <RadzenButton Click="@Close" Variant="Variant.Flat" Text="Close" Style="width: 120px" />
    </RadzenStack>
</RadzenStack>
@code {
    [Parameter] public Order Order { get; set; }

    Order order;
    IEnumerable<OrderDetail> orderDetails;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        order = dbContext.Orders.Where(o => o.OrderID == Order.OrderID)
                          .Include("Customer")
                          .Include("Employee").FirstOrDefault();

        orderDetails = dbContext.OrderDetails.Include("Order").ToList();
    }

    async Task Close()
    {
        var result = await dialogService.Confirm("Are you sure?");
        if (result == true)
        {
            dialogService.Close(true);
        }
    }
}

image
image1920×1080 297 KB

1 Like