dialog 1

ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor

@@ -37,6 +37,7 @@
                 <RadzenPanelMenuItem Text="Row" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutrow" />
                 <RadzenPanelMenuItem Text="Column" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutcolumn" />
                 <RadzenPanelMenuItem Text="Card" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutcard" />
+                <RadzenPanelMenuItem Text="Dialog" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutdialog" />
             </RadzenPanelMenuItem>
         </RadzenPanelMenu>
     </RadzenStack>

ComponentPractice/ComponentPractice/Components/Pages/DialogCard.razor

@@ -0,0 +1,57 @@
+@page "/dialogcard/{EmployeeId}"
+
+@inject InMemoryData data;
+@inject Radzen.DialogService dialogService;
+
+@rendermode RenderMode.InteractiveServer
+
+@if (employee is null)
+{
+    <RadzenText class="rz-color-on-warning-light" TextStyle="TextStyle.DisplayH5">No data</RadzenText>
+}
+else
+{
+    <RadzenStack class="rz-p-4" Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Start" Gap="1rem">
+        <RadzenImage Path="@employee.Photo" Style="width:100px; height:100px; border-radius:50%" />
+        <RadzenStack Gap="0">
+            <RadzenText class="rz-display-flex rz-mt-2 rz-my-0" TextStyle="TextStyle.Overline">Employee</RadzenText>
+            <RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.FirstName} {employee.LastName}")</b></RadzenText>
+            <RadzenText class="rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Job Title</RadzenText>
+            <RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.Title} {employee.Job}")</b></RadzenText>
+        </RadzenStack>
+    </RadzenStack>
+    <RadzenCard class="rz-background-color-primary-light rz-shadow-0 rz-border-radius-0 rz-p-8" style="margin: 1rem calc(-1 * var(--rz-card-padding));">
+        <RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.H6"><strong>Personal Information</strong></RadzenText>
+        <RadzenRow RowGap="0">
+            <RadzenColumn SizeSM="4">
+                <RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Hire Date</RadzenText>
+                <RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.HireDate.ToString("yyyy-MM-dd")</RadzenText>
+                <RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Phone</RadzenText>
+                <RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Phone</RadzenText>
+            </RadzenColumn>
+            <RadzenColumn OffsetSM="2" SizeSM="6">
+                <RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Region</RadzenText>
+                <RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Region</RadzenText>
+                <RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Address</RadzenText>
+                <RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Address</RadzenText>
+            </RadzenColumn>
+        </RadzenRow>
+    </RadzenCard>
+    <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="0">
+        <RadzenButton Variant="Variant.Text" Text="Send" Click="@((args) => dialogService.Close(true))" />
+        <RadzenButton class="rz-text-secondary-color" Variant="Variant.Text" Text="Cancel" Click="@((args) => dialogService.Close(false))" />
+    </RadzenStack>
+}
+
+@code {
+    [Parameter]
+    public int EmployeeId { get; set; }
+
+    Employee employee;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var employees = await data.GetFixedEmployeeDataAsync();
+        employee = employees.Where(e => e.ID == EmployeeId).FirstOrDefault();
+    }
+}

ComponentPractice/ComponentPractice/Components/Pages/LayoutDialog.razor

@@ -0,0 +1,54 @@
+@page "/layoutdialog"
+
+@inject DialogService dialogService;
+
+@rendermode RenderMode.InteractiveServer
+
+<RadzenCard class="rz-p-4 rz-mt-6">
+    <RadzenText TextStyle="TextStyle.H5">Open page as Dialog</RadzenText>
+    <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin-bottom: 1rem;" />
+
+    <div class="rz-p-12 rz-text-align-center">
+        <RadzenButton Text="@($"Show details of Employee ID {employeeId}")" ButtonStyle="ButtonStyle.Secondary" Click="@OpenEmployeeDetail"/>
+    </div>
+</RadzenCard>
+
+<RadzenCard class="rz-p-4 rz-mt-6">
+    <RadzenText TextStyle="TextStyle.H5">Inline Dialog</RadzenText>
+    <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin-bottom: 1rem;" />
+
+    <div class="rz-p-12 rz-text-align-center">
+        <RadzenButton Text="@($"Show Inline Dialog")" ButtonStyle="ButtonStyle.Secondary" Click="@ShowInlineDialog" />
+    </div>
+</RadzenCard>
+
+@code {
+    int employeeId = Random.Shared.Next(1, 100);
+
+    public async Task OpenEmployeeDetail()
+    {
+        var result = await dialogService.OpenAsync<DialogCard>($"Employee ID {employeeId}",
+            new Dictionary<string, object>() { { "EmployeeId", employeeId } },
+            new DialogOptions() { Width = "50%", Height = "550px", Resizable = true, Draggable = true });
+
+        int a = 0;
+    }
+
+    public async Task ShowInlineDialog()
+    {
+        var result = await dialogService.OpenAsync("Simple Inline Dialog", ds =>
+        @<RadzenStack Gap="1.5rem">
+            <p>Inline Dialog</p>
+            <div class="my-3">
+            This is sample of inline dialog. (Employee ID: @employeeId)
+            </div>
+            <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween">
+                <RadzenStack Orientation="Orientation.Horizontal">
+                    <RadzenButton Text="OK" Click="@(() => ds.Close(true))" />
+                    <RadzenButton Text="Cancel" Click="@(() => ds.Close(false))" ButtonStyle="ButtonStyle.Light" />
+                </RadzenStack>
+            <RadzenButton Text="Refresh" Click="@(() => { employeeId = Random.Shared.Next(1, 100); ds.Refresh(); })" ButtonStyle="ButtonStyle.Light" />
+            </RadzenStack>
+        </RadzenStack>);
+    }
+}

ComponentPractice/ComponentPractice/Program.cs

@@ -19,12 +19,14 @@ namespace ComponentPractice
             // Add controllers
             builder.Services.AddControllers();
 
-            // Add swagger
+            // Add Swagger
             builder.Services.AddEndpointsApiExplorer();
             builder.Services.AddSwaggerGen();
 
+            // Add Radzen components
             builder.Services.AddRadzenComponents();
 
+            // Add Data services
             builder.Services.AddSingleton<InMemoryData>();
             builder.Services.AddScoped<NorthwindDataService>();
             builder.Services.AddScoped<ToCSVService>();