LgFilterFrame

LgFilterFrame extends LgFrame to build a ready-to-use filter panel. It automatically adds reset actions and, if necessary, a button to reveal an advanced filter area.

<LgFilterFrame Title="Filters">
    <ChildListViewContent>
        Main filters
    </ChildListViewContent>
</LgFilterFrame>

• Namespace: Lagoon.UI.Components
• Inherits from: LgFrame → LgAriaComponentBase → LgComponentBase
• NuGet package: Lagoon.UI

Automatically enriched toolbar

LgFilterFrame reuses the inherited Toolbar property, then always adds a Reset button and, only if ChildContentViewMore is defined, a Show more / Show less button.

Usage

Filter panel with advanced area

The main content goes in ChildListViewContent. The ChildContentViewMore area remains hidden until the user enables Show more ; if it is absent, the Show more / Show less button is not rendered. The Reset button is always added to the toolbar.

CustomerSearchPage.razor

@inherits LgPage

<LgEditForm Model="@_search">
    <LgFilterFrame Title="#CustomerFiltersTitle"
                   IconName="@IconNames.All.Funnel"
                   Kind="Kind.Secondary"
                   OnResetFilters="OnResetFiltersAsync"
                   OnViewMoreFilters="OnViewMoreFiltersAsync"
                   OnCommand="OnFilterCommandAsync">
        <Toolbar>
            <LgToolbarButton Text="#ExportCustomers"
                             IconName="@IconNames.All.Pdf"
                             CommandName="export-customers" />
        </Toolbar>
        <ChildListViewContent>
            <LgTextBox @bind-Value="_search.Name"
                       Label="#CustomerName"
                       Placeholder="#CustomerNamePlaceholder"
                       OnChange="OnSearchChangedAsync" />
            <LgTextBox @bind-Value="_search.Type"
                       Label="#CustomerType"
                       Placeholder="#CustomerTypePlaceholder"
                       OnChange="OnSearchChangedAsync" />
        </ChildListViewContent>
        <ChildContentViewMore>
            <LgNumericBox @bind-Value="_search.Year"
                          Label="#CustomerYear"
                          Placeholder="#CustomerYearPlaceholder"
                          OnChange="OnSearchChangedAsync" />
            <LgTextBox @bind-Value="_search.Color"
                       Label="#CustomerColor"
                       Placeholder="#CustomerColorPlaceholder"
                       OnChange="OnSearchChangedAsync" />
        </ChildContentViewMore>
        <FooterContent>
            <p>@("#CustomerResultCount".Translate()) @_resultCount</p>
        </FooterContent>
    </LgFilterFrame>
</LgEditForm>

CustomerSearchPage.razor.cs

public partial class CustomerSearchPage : LgPage
{
    // Filter criteria model tied to fields: resetting it resets the entire search.
    private CustomerSearchCriteria _search = new();

    // Counter displayed in the footer to provide immediate feedback on the entered criteria.
    private int _resultCount = 42;

    // Tracks the opening of the advanced area to adapt loading or business telemetry.
    private bool _showAdvancedFilters;

    // Resets the criteria to their default values and restarts the search.
    private Task OnResetFiltersAsync(FilterFrameResetEventArgs args)
    {
        _search = new();
        return RefreshResultsAsync();
    }

    // Notifies the display of advanced filters: load here the lists necessary for the additional fields.
    private Task OnViewMoreFiltersAsync(FilterFrameViewMoreEventArgs args)
    {
        _showAdvancedFilters = args.ShowViewMore;
        return Task.CompletedTask;
    }

    // Triggered by main and advanced fields: syncs the list with the current criteria.
    private Task OnSearchChangedAsync(ChangeEventArgs args)
    {
        return RefreshResultsAsync();
    }

    // Receives commands added to the toolbar, in addition to the component's automatic buttons.
    private Task OnFilterCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "export-customers")
        {
            args.Handled = true;
        }

        return Task.CompletedTask;
    }

    // Reloads the filtered data source; the example only adjusts a counter.
    private Task RefreshResultsAsync()
    {
        _resultCount = string.IsNullOrWhiteSpace(_search.Name) ? 42 : 8;
        return Task.CompletedTask;
    }

    private sealed class CustomerSearchCriteria
    {
        public string Name { get; set; }

        public string Type { get; set; }

        public int? Year { get; set; }

        public string Color { get; set; }
    }
}

Points of attention

• ChildContent is inherited from LgFrame, but the rendering of LgFilterFrame uses ChildListViewContent and ChildContentViewMore.
• Toolbar complements the automatic buttons: it does not replace either Reset or Show more / Show less.
• OnResetFilters does not automatically collapse the advanced area; it is used to reset your filter model.
• OnViewMoreFilters exposes FilterFrameViewMoreEventArgs.ShowViewMore to know whether the advanced area was just shown or hidden.

Properties

Name	Type	Default	Declared in	Description
ChildListViewContent	RenderFragment	null	LgFilterFrame	Main content of the filter panel.
ChildContentViewMore	RenderFragment	null	LgFilterFrame	Additional content hidden by default, displayed via the Show more / Show less button.
OnResetFilters	EventCallback<FilterFrameResetEventArgs>	—	LgFilterFrame	Callback triggered on click of Reset filters.
OnViewMoreFilters	EventCallback<FilterFrameViewMoreEventArgs>	—	LgFilterFrame	Callback triggered on click of Show more / Show less.
ChildContent	RenderFragment	null	LgFrame	Inherited parameter, but not used by LgFilterFrame rendering. Use ChildListViewContent and ChildContentViewMore instead.
FooterContent	RenderFragment	null	LgFrame	Footer content.
HeaderContent	RenderFragment	null	LgFrame	Free content added in the header.
SummaryContent	RenderFragment	null	LgFrame	Summary displayed when the frame is collapsed.
TitleContent	RenderFragment	null	LgFrame	Custom title in markup.
Toolbar	RenderFragment	null	LgFrame	Additional toolbar content, merged with the component's automatic buttons.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgFrame	Additional HTML attributes applied to the root element.
ButtonSize	ButtonSize?	null	LgFrame	Size of toolbar buttons.
ChildCssClass	string	null	LgFrame	CSS classes of the main content.
Collapsable	bool	false	LgFrame	Enables panel collapse.
Collapsed	bool	false	LgFrame	Current collapsed state.
CollapsedChanged	EventCallback<bool>	—	LgFrame	Two-way binding callback for Collapsed.
CssClass	string	null	LgFrame	Additional CSS classes.
DefaultCollapsed	bool?	null	LgFrame	Initial collapsed state applied during initialization.
HeaderCssClass	string	null	LgFrame	CSS classes of the header.
IconName	string	null	LgFrame	Icon displayed before the title.
Kind	Kind	Kind.Primary	LgFrame	Visual theme of the panel.
OnCommand	EventCallback<CommandEventArgs>	—	LgFrame	Reception of commands bubbled by child components.
OnToggle	EventCallback<ToggleFrameEventArgs>	—	LgFrame	Collapse/expand callback inherited from LgFrame.
ShowHeader	bool	true	LgFrame	Shows or hides the header.
Title	string	null	LgFrame	Text title of the panel.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Events

Event	Type	Description
OnResetFilters	EventCallback<FilterFrameResetEventArgs>	Triggered when the user clicks the Reset filters button added by the component.
OnViewMoreFilters	EventCallback<FilterFrameViewMoreEventArgs>	Triggered when the user shows or hides the ChildContentViewMore area.
CollapsedChanged	EventCallback<bool>	Inherited from LgFrame to synchronize Collapsed if you also render the panel as collapsible.
OnCommand	EventCallback<CommandEventArgs>	Inherited from LgFrame to retrieve commands bubbled from the child content.
OnToggle	EventCallback<ToggleFrameEventArgs>	Inherited from LgFrame to track any manual collapse of the panel.

Associated enumerations

The enumerations below concern the parameters inherited from LgFrame exposed by LgFilterFrame.

Kind

Kind controls the visual theme of the inherited Kind property of the panel. See the complete table in LgFrame (default value: Kind.Primary).

ButtonSize

ButtonSize controls the inherited ButtonSize property, used to size the panel's toolbar buttons.

Value	Description
Medium	Standard size.
Small	Reduced size (default value of standard Lagoon configuration when ButtonSize remains null).
Large	Large size.

Related components

• LgFrame — base component from which LgFilterFrame inherits.
• LgToolbarButton — button typically used to complement the panel's toolbar.
• LgSplitContainer — common layout to place a filter panel next to a results area.