Skip to main content

Radzen Helpers and Side Dialog Layouts

PearDrop provides PearDrop.Helpers.Radzen.Client for reusable Radzen-oriented UI helpers. The main helpers introduced for module-level consistency are side dialog layouts.

What This Module Provides​

  • PearDropSideDialogLayout for non-form dialogs (confirmations, review panels, move dialogs)
  • PearDropFormSideDialogLayout for form dialogs (EditForm + validation flow)

Required Imports​

@using PearDrop.Helpers.Radzen.Client.SlideOut
@using Microsoft.AspNetCore.Components.Forms
@using Blazored.FluentValidation

Non-Form Side Dialog​

Use PearDropSideDialogLayout when you need a consistent side panel with body content and primary/secondary actions.

<PearDropSideDialogLayout
  Icon="folder_open"
  Title="Move Items"
  Description="Select a destination folder."
  PrimaryButtonText="Move"
  SecondaryButtonText="Cancel"
  IsPrimaryButtonBusy="@isSaving"
  OnPrimaryClick="OnMoveAsync"
  OnSecondaryClick="OnCancelAsync">
  <Content>
    <RadzenTree Data="@folders" />
  </Content>
</PearDropSideDialogLayout>

Form Side Dialog​

Use PearDropFormSideDialogLayout for form workflows where submit behavior is tied to EditContext and validation.

<PearDropFormSideDialogLayout
  Icon="edit"
  Title="Rename Item"
  Description="Provide a new name."
  EditContext="@editContext"
  PrimaryButtonText="Save"
  SecondaryButtonText="Cancel"
  IsPrimaryButtonBusy="@isSaving"
  OnValidSubmit="OnSaveAsync"
  OnSecondaryClick="OnCancelAsync">
  <Content>
    <FluentValidationValidator />
    <RadzenTextBox @bind-Value="@model.Name" Name="Name" />
  </Content>
</PearDropFormSideDialogLayout>

When to Use​

  • You want consistent slide-out UX across features/modules
  • You need shared footer actions and button loading state behavior
  • You want a standard form dialog wrapper with validation support