LgGridMonthColumn

LgGridMonthColumn<TColumnValue> is a LgGridView column specialized in the month of a date value: the default display format is MM/yyyy and editing opens the selector at the month level (like LgMonthBox).

<Columns Context="item">
    <LgGridMonthColumn @bind-Value="item.BillingMonth" Title="#BillingMonth" />
</Columns>

• Namespace : Lagoon.UI.Components
• Inherits from : LgGridDateColumn<TColumnValue> → LgGridBaseValueColumn<TColumnValue> → LgGridBaseColumn
• NuGet package : Lagoon.UI.GridView

Usage

Demonstration

Try this component in the Lagoon showcase.

Editable month column

InvoiceListPage.razor

<LgGridView StateId="invoices-month-column"
            Items="_invoices"
            EditMode="GridEditMode.Cell"
            Title="#InvoicesGridTitle">
    <Columns Context="item">
        <LgGridTextColumn @bind-Value="item.Number" Title="#InvoiceNumber" />
        <LgGridMonthColumn @bind-Value="item.BillingMonth"
                           Title="#BillingMonth"
                           CanEdit="true" />
    </Columns>
</LgGridView>

InvoiceListPage.razor.cs

public partial class InvoiceListPage : LgPage
{
    // Rows displayed by the grid: the billing month is carried by a full date.
    private readonly List<InvoiceVm> _invoices = new();

    private sealed class InvoiceVm
    {
        public string Number { get; set; }
        public DateTime? BillingMonth { get; set; }
    }
}

Format, bounds, and calculation

DisplayFormat replaces the default MM/yyyy format (e.g., MMMM yyyy for the month name). Min / Max limit the selection in the calendar. CalculationType displays a calculation in the column footer.

ContractListPage.razor

<LgGridView StateId="contracts-month-column" Items="_contracts" Title="#ContractsGridTitle">
    <Columns Context="item">
        <LgGridTextColumn @bind-Value="item.Reference" Title="#ContractReference" />
        <LgGridMonthColumn @bind-Value="item.StartMonth"
                           Title="#StartMonth"
                           DisplayFormat="MMMM yyyy"
                           Min="_minDate"
                           Max="_maxDate"
                           CalculationType="DataCalculationType.Min" />
    </Columns>
</LgGridView>

ContractListPage.razor.cs

public partial class ContractListPage : LgPage
{
    // Authorized contract window: limits the month selector of cells in edit mode.
    private readonly DateTime _minDate = new(2020, 1, 1);
    private readonly DateTime _maxDate = new(2030, 12, 31);

    private readonly List<ContractVm> _contracts = new();

    private sealed class ContractVm
    {
        public string Reference { get; set; }
        public DateTime? StartMonth { get; set; }
    }
}

Properties

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
Max	DateTime?	null	LgGridDateColumn	Latest date selectable in edit mode; later dates are disabled.
Min	DateTime?	null	LgGridDateColumn	Earliest date selectable in edit mode; earlier dates are disabled.
CellContent	RenderFragment<TColumnValue>	null	LgGridBaseValueColumn	Custom template for the cell in display mode.
CustomEditType	Type	null	LgGridBaseValueColumn	Component type used in edit mode instead of the default component.
EditCellContent	RenderFragment<TColumnValue>	null	LgGridBaseValueColumn	Custom template for the cell in edit mode.
Value	TColumnValue	—	LgGridBaseValueColumn	Bound value (@bind-Value).
ValueChanged	EventCallback<TColumnValue>	—	LgGridBaseValueColumn	Callback to update the bound value.
ValueExpression	Expression<Func<TColumnValue>>	—	LgGridBaseValueColumn	Expression identifying the bound property (carries sort, filter, and calculations).
AllowFilter	bool	true	LgGridBaseFilterableColumn	Enables the column filter (automatically disabled without a filter expression).
AllowHide	bool	true	LgGridBaseColumn	Allows the user to hide the column.
AllowSort	bool	true	LgGridBaseColumn	Enables column sorting (automatically disabled without a sort expression).
AriaLabel	string	null	LgGridBaseColumn	Value of the column's aria-label attribute.
AriaLabelledBy	string	null	LgGridBaseColumn	Value of the column's aria-labelledby attribute.
CalculationCssClass	string	null	LgGridBaseColumn	CSS classes of the calculation cell.
CalculationDisplayFormat	string	null	LgGridBaseColumn	Display format of the calculation cell.
CalculationType	DataCalculationType	None	LgGridBaseColumn	Calculation displayed in column footer (ignored without ValueExpression).
CanAdd	bool	true	LgGridBaseColumn	Allows input of the column in the add row.
CanEdit	bool	true	LgGridBaseColumn	Allows editing of column cells.
ColSpan	int	-1	LgGridBaseColumn	Number of columns occupied by the cell.
ConfirmationMessage	string	null	LgGridBaseColumn	Confirmation message before modification (cell edit mode only).
CssClass	string	null	LgGridBaseColumn	CSS classes applied to all cells in the column.
DefaultFilter	Filter	null	LgGridBaseFilterableColumn	Filter applied by default.
DefaultFrozen	bool	false	LgGridBaseColumn	Freezes the column by default.
DefaultSortDirection	DataSortDirection	None	LgGridBaseColumn	Default sort direction.
DefaultVisible	bool	true	LgGridBaseColumn	Displays the column by default.
DefaultWidth	string	"1fr"	LgGridBaseColumn	Default width of the column.
DisplayFormat	string	"MM/yyyy"	LgGridBaseColumn	Display format of the value.
Exportable	bool	true	LgGridBaseColumn	Includes the column in exports.
ExportTitle	string	null	LgGridBaseColumn	Title used in export (Title by default).
ExportValueAsString	bool	false	LgGridBaseColumn	Forces the value to be exported as text.
FilterCellContent	RenderFragment<FilterContext>	null	LgGridBaseFilterableColumn	Custom template of the filter cell.
FilterDisableSelection	bool	false	LgGridBaseFilterableColumn	Hides the value selection tab in the filter editor.
FilterExpression	LambdaExpression	null	LgGridBaseFilterableColumn	Filter expression (ValueExpression is used by default).
FilterShowAllItems	bool?	null	LgGridBaseFilterableColumn	Offers all values in the filter, regardless of filters from other columns.
GroupExpression	LambdaExpression	null	LgGridBaseColumn	Grouping expression.
GroupName	string	null	LgGridBaseColumn	Name of the column header group.
HeaderCellContent	RenderFragment	null	LgGridBaseColumn	Custom template of the header cell.
HeaderCssClass	string	null	LgGridBaseColumn	CSS classes of the header cell.
HeaderTooltip	string	null	LgGridBaseColumn	Header tooltip.
HideContent	bool	false	LgGridBaseColumn	Hides cell content.
Key	string	null	LgGridBaseColumn	Unique identifier of the column (deduced from ValueExpression if absent).
LambdaExpression	LambdaExpression	null	LgGridBaseColumn	Common sort and filter expression.
Placeholder	string	null	LgGridDateColumn	Placeholder text displayed in the cell editor.
MaxWidth	int	0	LgGridBaseColumn	Maximum width of the column.
MinSearchFilterCharacter	int	0	LgGridBaseFilterableColumn	Minimum number of characters before launching search in the filter.
MinWidth	int	0	LgGridBaseColumn	Minimum width of the column.
OnCellClick	EventCallback<GridViewCellClickEventArgs<TItem>>	—	LgGridBaseColumn	Callback triggered on click of a cell in the column.
Resizable	bool	true	LgGridBaseColumn	Allows column resizing.
Title	string	null	LgGridBaseColumn	Column title.
WeightExpression	LambdaExpression	null	LgGridBaseColumn	Weight expression for weighted average (CalculationType="Average").

Cascading parameters

The column receives its parent grid (LgGridView<TItem>) and its rendering context through cascading parameters provided by LgGridView — you do not need to define them.

Methods & events

Event	Type	Description
OnCellClick	EventCallback<GridViewCellClickEventArgs<TItem>>	On click of a cell in the column.
ValueChanged	EventCallback<TColumnValue>	On modification of a cell value (@bind-Value).

Associated enumerations

Inherited enumerations are documented on the base column: DataCalculationType and DataSortDirection on LgGridDateColumn, edit modes (GridEditMode) on LgGridView.

Best practices / accessibility

• The bound value remains a full date: only the month is displayed and edited. To input a month alone (int) in a form, use LgMonthBox.
• The applied filter is a date filter: it operates on the full value, not just the displayed month.

Complete reference

Sheet generated from sources: API Reference — LgGridMonthColumn.

Related components

• LgGridView — the data grid that hosts the column.
• LgGridDateColumn — base date column (day).
• LgGridWeekColumn — week column.
• LgGridYearColumn — year column.
• LgMonthBox — month selection field used outside the grid.