Class RadzenPanel

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

IDisposable

Inherited Members

RadzenComponentWithChildren.ChildContent

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenPanel : RadzenComponentWithChildren, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

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

RadzenPanel()

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()

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");
}

Properties

AllowCollapse

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

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

Property Value

Type	Description
bool	true to allow collapsing; otherwise, false. Default is false.

Collapse

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

[Parameter]
public EventCallback Collapse { get; set; }

Property Value

Type	Description
EventCallback	The collapse event callback.

CollapseAriaLabel

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

Declaration

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

Property Value

Type	Description
string	The aria-label attribute value of the collapse button.

CollapseTitle

Gets or sets the title attribute of the collapse button.

Declaration

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

Property Value

Type	Description
string	The title attribute value of the collapse button.

Collapsed

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

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

Property Value

Type	Description
bool	true if the panel is collapsed; otherwise, false. Default is false.

Expand

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

[Parameter]
public EventCallback Expand { get; set; }

Property Value

Type	Description
EventCallback	The expand event callback.

ExpandAriaLabel

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

Declaration

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

Property Value

Type	Description
string	The aria-label attribute value of the expand button.

ExpandTitle

Gets or sets the title attribute of the expand button.

Declaration

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

Property Value

Type	Description
string	The title attribute value of the expand button.

FooterTemplate

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

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

Property Value

Type	Description
RenderFragment	The footer template render fragment.

HeaderTemplate

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

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

Property Value

Type	Description
RenderFragment	The header template render fragment.

Icon

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

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

Property Value

Type	Description
string	The Material icon name.

IconColor

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

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

Property Value

Type	Description
string	The icon color as a CSS color value.

SummaryTemplate

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

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

Property Value

Type	Description
RenderFragment	The summary template render fragment.

Text

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

Declaration

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

Property Value

Type	Description
string	The header text. Default is empty string.

Methods

BuildRenderTree(RenderTreeBuilder)

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

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

OnInitialized()

Called by the Blazor runtime.

Declaration

protected override void OnInitialized()

Overrides

RadzenComponent.OnInitialized()

SetParametersAsync(ParameterView)

Called by the Blazor runtime when parameters are set.

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Type	Name	Description
ParameterView	parameters	The parameters.

Returns

Type	Description
Task

Overrides

RadzenComponent.SetParametersAsync(ParameterView)

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable