LgGridTagBoxColumn

LgGridTagBoxColumn manages free-text tags. It inherits from LgGridBaseTextColumn<TItem, List<string>>.

<Columns Context="item">
    <LgGridTagBoxColumn @bind-Value="item.Tags"
                        Title="#Tags"
                        Placeholder="#TagsPlaceholder"
                        MaxTags="5" />
</Columns>

• NuGet package: Lagoon.UI.GridView

Common parameters are documented in LgGridBaseColumn.

Specific parameters

Name	Type	Default	Description
TagBoxCssClass	string	null	CSS classes for the TagBox.
TagBoxItemCssClass	string	"label label-info"	CSS classes applied to each tag.
Placeholder	string	null	Placeholder for the input field.
MaxTags	int?	null	Maximum number of tags.
MaxChars	int?	null	Maximum length of a tag.
ConfirmKeys	List<int>	[13,59,44]	Keys confirming input: Enter, ;, ,.
Delimiter	string	";"	Delimiter used for the value.
AllowDuplicates	bool	false	Allows duplicates.
NoWrap	bool	false	Fixed height with horizontal scroll.

Usage

Free tags in cell editing

GridTagBoxColumnPage.razor

@inherits LgPage

<LgGridView StateId="orders-tagbox-column"
            Items="_orders"
            EditMode="GridEditMode.Cell"
            Title="#OrdersGridTitle">
    <Columns Context="item">
        <LgGridTextColumn @bind-Value="item.Number" Title="#OrderNumber" />
        <LgGridTagBoxColumn @bind-Value="item.Tags"
                            Title="#Tags"
                            Placeholder="#TagsPlaceholder"
                            MaxTags="5"
                            MaxChars="30"
                            Delimiter=";"
                            AllowDuplicates="false"
                            NoWrap="true" />
    </Columns>
</LgGridView>

ConfirmKeys allows you to replace the default validation keys (Enter, ;, ,) if your business input uses another separator.

Filter

Text / tag list filter.

Associated enumerations

The enumerations inherited from LgGridView used in the examples (GridEditMode) are documented in LgGridView.

Complete reference

Sheet generated from sources: API Reference — LgGridTagBoxColumn.

Related components

• LgGridView — the data grid that hosts the column.
• LgGridTextColumn — base column and inherited common parameters.