Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxDropDown.HeaderTemplate Property

Specifies a template for the drop-down window’s header. Replaces the default render fragment (including paddings, scrollbars, etc.)

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public RenderFragment<IPopupElementInfo> HeaderTemplate { get; set; }

#Property Value

Type Description
RenderFragment<IPopupElementInfo>

The header template.

#Remarks

Use the HeaderTemplate property to display any UI render fragment in the header element of the drop-down window. This template changes the default header rendering, including paddings, scrollbar, and inner content alignment. If you need to place custom content in the drop-down window header but retain its default rendering, use the HeaderContentTemplate instead.

The HeaderTemplate has the context parameter. You can use the parameter’s CloseCallback property to implement a custom close button.

Razor
<DxButton Id="showDDbtton" Click="() => IsOpen = true">Show DropDown</DxButton>
<DxDropDown HeaderVisible="true"
            FooterVisible="true"
            Width="max(25vw, 300px)"
            BodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel
             nisi blandit tincidunt vel efficitur purus."
            @bind-IsOpen="@IsOpen"
            PositionTarget="#showDDbtton"
            PositionMode="DropDownPositionMode.Bottom">
    <HeaderTemplate>
        <div style="background-color:rgb(95,54,141); color:white; padding-left:10px; font-size:20px">
            Information
        </div>
    </HeaderTemplate>
    <FooterContentTemplate>
        <DxButton RenderStyle="ButtonRenderStyle.Primary" Text="OK" Click="@context.CloseCallback" />
    </FooterContentTemplate>
</DxDropDown>

@code {
    bool IsOpen { get; set; } = false;
}

Blazor DropDown Header and Footer Templates

The HeaderTemplate property has priority over HeaderText, HeaderContentTemplate, and HeaderTextTemplate properties.

See Also