Class

TelerikDialog

Declaration

public TelerikDialog()

Controls how action buttons are arranged in the dialog footer area. Stretch makes buttons fill available width with equal sizing. Start aligns buttons to the left side of the footer. End aligns buttons to the right side of the footer. Center centers buttons within the footer area. Default value is Stretch for consistent button sizing. UX: End alignment is common for OK/Cancel patterns, Stretch for equal emphasis.

Declaration

[Parameter]
public DialogButtonsLayout ButtonsLayout { get; set; }

Property Value

Controls whether clicking the semi-transparent background overlay closes the dialog. When true, users can close the dialog by clicking outside the dialog area. When false, users must use the close button, escape key, or programmatic methods to close. Recommended for non-critical dialogs where accidental closure is acceptable. ACCESSIBILITY: When true, ensure users understand they can click outside to close. UX: Enable for informational dialogs, disable for forms with unsaved data.

Declaration

[Parameter]
public bool CloseOnOverlayClick { get; set; }

Property Value

Defines action buttons displayed in the dialog footer area. Children: TelerikButton components for user interactions like Save, Cancel, Delete. Buttons are automatically styled and positioned according to ButtonsLayout setting. Use for primary and secondary actions that users can perform within the dialog context. LAYOUT: Button arrangement is controlled by ButtonsLayout parameter.

Declaration

[Parameter]
public RenderFragment DialogButtons { get; set; }

Property Value

Defines the main dialog content using Razor markup. Children: allows arbitrary content including text, forms, buttons, and other components. Content is rendered within the dialog body area below the title and above action buttons. REQUIREMENT: Essential for meaningful dialog - empty content creates unusable dialog. LAYOUT: Content area expands to fill available space between title and buttons.

Declaration

[Parameter]
public RenderFragment DialogContent { get; set; }

Property Value

Defines custom title content using Razor markup instead of plain text. Children: allows arbitrary content including icons, formatted text, and interactive elements. Use when you need more control over title appearance than the simple Title parameter provides. INCOMPATIBILITY: When DialogTitle is provided, the Title parameter is ignored. ACCESSIBILITY: Ensure custom title content maintains proper heading semantics for screen readers.

Declaration

[Parameter]
public RenderFragment DialogTitle { get; set; }

Property Value

Specifies a CSS selector for the element that should receive focus when the dialog opens. Use standard CSS selectors like "#myInput", ".focus-target", or "button[type='submit']". When not specified, the dialog container receives focus for keyboard navigation. ACCESSIBILITY: Essential for screen readers and keyboard users to know where focus should go. UX: Focus first input field in forms or primary action button for better user experience. Example: "#firstName", ".primary-input", "button[type='submit']", ".focus-target".

Declaration

[Parameter]
public string FocusedElementSelector { get; set; }

Property Value

Controls the dialog height using any supported CSS unit. Accepts pixels ("300px"), percentages ("70%"), or viewport units ("60vh"). Default behavior allows dialog to size based on content up to maximum screen height. When content exceeds height, scrollbars appear automatically within the dialog body. RESPONSIVE: Percentage and viewport units provide responsive behavior across screen sizes. SCROLLING: Fixed heights enable predictable content scrolling behavior. Example: "400px", "60%", "50vh", "auto".

Declaration

[Parameter]
public string Height { get; set; }

Property Value

Controls whether the dialog displays a close button (X) in the top-right corner of the title bar. When false, removes the close button requiring users to close via overlay click, escape key, or programmatic methods. Default value is true to provide standard dialog closing behavior. ACCESSIBILITY: When false, ensure CloseOnOverlayClick is true or provide other closing mechanisms. UX: Close button provides clear exit path for users unfamiliar with keyboard shortcuts.

Declaration

[Parameter]
public bool ShowCloseButton { get; set; }

Property Value

Sets the dialog title displayed in the header bar as plain text. Appears as bold text at the top of the dialog window. Leave empty to hide the title bar entirely, creating more space for content. INCOMPATIBILITY: Ignored when DialogTitle render fragment is provided. ACCESSIBILITY: Title serves as accessible name for screen readers when provided. Example: "Edit User Profile", "Confirm Action", "Settings".

Declaration

[Parameter]
public string Title { get; set; }

Property Value

Controls whether the dialog is currently displayed to the user. Set to true to show the dialog, false to hide it. Use with two-way binding: @bind-Visible="isDialogOpen" for automatic state management. REQUIREMENT: When using programmatic control, combine with VisibleChanged for proper two-way binding. Example: "@bind-Visible="showDialog"", "Visible="true"", "Visible="@isEditing"".

Declaration

[Parameter]
public bool Visible { get; set; }

Property Value

Fires when the dialog visibility state changes, enabling two-way data binding. Triggered when user closes dialog via close button, escape key, or backdrop click (if CloseOnOverlayClick is true). Use for handling dialog state changes and performing cleanup operations. REQUIREMENT: Required for proper two-way binding when using @bind-Visible syntax.

Declaration

[Parameter]
public EventCallback<bool> VisibleChanged { get; set; }

Property Value

Controls the dialog width using any supported CSS unit. Accepts pixels ("400px"), percentages ("50%"), or viewport units ("50vw"). Default behavior allows dialog to size based on content up to maximum screen width. RESPONSIVE: Percentage and viewport units provide responsive behavior across screen sizes. PERFORMANCE: Fixed pixel widths offer consistent rendering performance. Example: "600px", "80%", "50vw", "auto".

Declaration

[Parameter]
public string Width { get; set; }

Property Value

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Overrides ComponentBase.BuildRenderTree(RenderTreeBuilder)

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Returns

Overrides BaseComponent.OnAfterRenderAsync(bool)

Declaration

protected override Task OnParametersSetAsync()

Returns

Overrides ComponentBase.OnParametersSetAsync()

Refreshes the dialog content.

Declaration

public void Refresh()

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Returns

Overrides ComponentBase.SetParametersAsync(ParameterView)