RadzenPanel Class

A collapsible panel component with customizable header, content, summary, and footer sections. RadzenPanel provides an expandable/collapsible container for organizing and hiding content, ideal for settings panels, detail sections, or grouped information. Displays content in a structured container with optional collapsing functionality. When AllowCollapse is enabled, users can click the header to toggle the panel's expanded/collapsed state. Supports customizable header via HeaderTemplate/Text/Icon properties, main panel body via ChildContent, optional summary content shown when collapsed (SummaryTemplate), optional footer section (FooterTemplate), Collapsed property with two-way binding for programmatic control, and Expand/Collapse event callbacks. The header displays a collapse/expand icon when AllowCollapse is true, and users can click anywhere on the header to toggle.

Inheritance

Object

ComponentBase

RadzenComponent

RadzenComponentWithChildren

RadzenPanel

Implements

IComponent

IHandleEvent

IHandleAfterRender

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenPanel : RadzenComponentWithChildren, IComponent, IHandleEvent, IHandleAfterRender

Examples

Basic collapsible panel:

<RadzenPanel Text="Advanced Options" Icon="settings" AllowCollapse="true">
    <RadzenStack Gap="1rem">
        <RadzenCheckBox @bind-Value=@option1 Text="Option 1" />
        <RadzenCheckBox @bind-Value=@option2 Text="Option 2" />
    </RadzenStack>
</RadzenPanel>

Panel with custom templates and events:

<RadzenPanel AllowCollapse="true" @bind-Collapsed=@isCollapsed Expand=@OnExpand Collapse=@OnCollapse>
    <HeaderTemplate>
        <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
            <RadzenIcon Icon="info" />
            <RadzenText TextStyle="TextStyle.H6">Details</RadzenText>
        </RadzenStack>
    </HeaderTemplate>
    <ChildContent>
        Detailed content here...
    </ChildContent>
    <SummaryTemplate>
        <RadzenText TextStyle="TextStyle.Caption">Click to expand details</RadzenText>
    </SummaryTemplate>
</RadzenPanel>
@code {
    bool isCollapsed = false;
    void OnExpand() => Console.WriteLine("Panel expanded");
    void OnCollapse() => Console.WriteLine("Panel collapsed");
}

Constructors

RadzenPanellink

A collapsible panel component with customizable header, content, summary, and footer sections. RadzenPanel provides an expandable/collapsible container for organizing and hiding content, ideal for settings panels, detail sections, or grouped information. Displays content in a structured container with optional collapsing functionality. When AllowCollapse is enabled, users can click the header to toggle the panel's expanded/collapsed state. Supports customizable header via HeaderTemplate/Text/Icon properties, main panel body via ChildContent, optional summary content shown when collapsed (SummaryTemplate), optional footer section (FooterTemplate), Collapsed property with two-way binding for programmatic control, and Expand/Collapse event callbacks. The header displays a collapse/expand icon when AllowCollapse is true, and users can click anywhere on the header to toggle.

Declaration
public RadzenPanel()

Properties

AllowCollapselink

Gets or sets whether the panel can be collapsed by clicking its header. When enabled, a collapse/expand icon appears in the header, and clicking anywhere on the header toggles the panel state.

Declaration
public bool AllowCollapse { get; set; }
Property Value
Type Description
boolGets or sets whether the panel can be collapsed by clicking its header. When enabled, a collapse/expand icon appears in the header, and clicking anywhere on the header toggles the panel state.

Collapselink

Gets or sets the callback invoked when the panel is collapsed from an expanded state. Useful for cleanup operations or tracking panel state changes.

Declaration
public EventCallback Collapse { get; set; }
Property Value
Type Description
EventCallbackGets or sets the callback invoked when the panel is collapsed from an expanded state. Useful for cleanup operations or tracking panel state changes.

CollapseAriaLabellink

Gets or sets the aria-label attribute of the collapse button.

Declaration
public string CollapseAriaLabel { get; set; }
Property Value
Type Description
stringGets or sets the aria-label attribute of the collapse button.

CollapseTitlelink

Gets or sets the title attribute of the collapse button.

Declaration
public string CollapseTitle { get; set; }
Property Value
Type Description
stringGets or sets the title attribute of the collapse button.

Collapsedlink

Gets or sets whether the panel is currently in a collapsed state. When collapsed, the main content is hidden and only the header (and optional SummaryTemplate) are visible. Use with @bind-Collapsed for two-way binding to programmatically control the panel state.

Declaration
public bool Collapsed { get; set; }
Property Value
Type Description
boolGets or sets whether the panel is currently in a collapsed state. When collapsed, the main content is hidden and only the header (and optional SummaryTemplate) are visible. Use with @bind-Collapsed for two-way binding to programmatically control the panel state.

Expandlink

Gets or sets the callback invoked when the panel is expanded from a collapsed state. Useful for loading data on-demand or triggering animations when the panel opens.

Declaration
public EventCallback Expand { get; set; }
Property Value
Type Description
EventCallbackGets or sets the callback invoked when the panel is expanded from a collapsed state. Useful for loading data on-demand or triggering animations when the panel opens.

ExpandAriaLabellink

Gets or sets the aria-label attribute of the expand button.

Declaration
public string ExpandAriaLabel { get; set; }
Property Value
Type Description
stringGets or sets the aria-label attribute of the expand button.

ExpandTitlelink

Gets or sets the title attribute of the expand button.

Declaration
public string ExpandTitle { get; set; }
Property Value
Type Description
stringGets or sets the title attribute of the expand button.

FooterTemplatelink

Gets or sets the footer content displayed at the bottom of the panel. This section appears below the main content and remains visible regardless of collapse state.

Declaration
public RenderFragment FooterTemplate { get; set; }
Property Value
Type Description
RenderFragmentGets or sets the footer content displayed at the bottom of the panel. This section appears below the main content and remains visible regardless of collapse state.

HeaderTemplatelink

Gets or sets the custom content for the panel header. When set, overrides the default header rendering (Text and Icon properties are ignored). Use this for complex headers with custom layouts, buttons, or other components.

Declaration
public RenderFragment HeaderTemplate { get; set; }
Property Value
Type Description
RenderFragmentGets or sets the custom content for the panel header. When set, overrides the default header rendering (Text and Icon properties are ignored). Use this for complex headers with custom layouts, buttons, or other components.

Iconlink

Gets or sets the Material icon name displayed in the panel header before the text. Use Material Symbols icon names (e.g., "settings", "info", "warning").

Declaration
public string Icon { get; set; }
Property Value
Type Description
stringGets or sets the Material icon name displayed in the panel header before the text. Use Material Symbols icon names (e.g., "settings", "info", "warning").

IconColorlink

Gets or sets a custom color for the header icon. Supports any valid CSS color value. If not set, uses the theme's default icon color.

Declaration
public string IconColor { get; set; }
Property Value
Type Description
stringGets or sets a custom color for the header icon. Supports any valid CSS color value. If not set, uses the theme's default icon color.

SummaryTemplatelink

Gets or sets the summary content displayed when the panel is collapsed. This optional content appears below the header in collapsed state, providing a preview or summary of the hidden content. When the panel is expanded, this content is not displayed.

Declaration
public RenderFragment SummaryTemplate { get; set; }
Property Value
Type Description
RenderFragmentGets or sets the summary content displayed when the panel is collapsed. This optional content appears below the header in collapsed state, providing a preview or summary of the hidden content. When the panel is expanded, this content is not displayed.

Textlink

Gets or sets the text displayed in the panel header. This appears as the panel title. For more complex headers, use HeaderTemplate instead.

Declaration
public string Text { get; set; }
Property Value
Type Description
stringGets or sets the text displayed in the panel header. This appears as the panel title. For more complex headers, use HeaderTemplate instead.

Methods

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

OnInitializedlink

Declaration
protected override void OnInitialized()

SetParametersAsynclink

Declaration
public override Task SetParametersAsync(ParameterView parameters)
Parameters
Type Name Description
ParameterView parameters
Returns
Type Description
Task
An error has occurred. This app may no longer respond until reloaded. Reload 🗙