LgGridDateColumn

LgGridDateColumn<TColumnValue> displays and edits a date with day or month precision.

<Columns Context="item">
    <LgGridDateColumn @bind-Value="item.OrderDate"
                      Title="#OrderDate"
                      DisplayFormat="dd/MM/yyyy"
                      DateBoxKind="DateBoxKind.Day" />
</Columns>

• NuGet package: Lagoon.UI.GridView

Common parameters are documented in LgGridBaseColumn.

Usage

Demonstration

Try this component in the Lagoon showcase.

Date format and calculation

GridDateColumnPage.razor

@inherits LgPage

<LgGridView StateId="orders-date-column"
            Items="_orders"
            EditMode="GridEditMode.Cell"
            Title="#OrdersGridTitle">
    <Columns Context="item">
        <LgGridTextColumn @bind-Value="item.Number" Title="#OrderNumber" />
        <LgGridDateColumn @bind-Value="item.Date" Title="#OrderDate" />
        <LgGridDateColumn @bind-Value="item.DeliveryDate"
                          Title="#DeliveryDate"
                          DisplayFormat="dd/MM/yyyy"
                          CanEdit="true"
                          CanAdd="true"
                          CalculationType="DataCalculationType.Max" />
    </Columns>
</LgGridView>

In remote mode, dates are serialized with their timezone context; keep an explicit display format when the grid mixes users or cultures.

Edit bounds per row (MinSelector / MaxSelector)

Min and Max bound the date editor. Since the <Columns> fragment is materialized only once, a bound that depends on the row must pass through MinSelector / MaxSelector (Func<TItem, DateTime?>), evaluated per row (edit mode only).

GridDateBoundsPage.razor

@inherits LgPage

<LgGridView StateId="orders-date-bounds" Items="_orders" EditMode="GridEditMode.Cell" Title="#OrdersGridTitle">
    <Columns Context="item">
        <LgGridDateColumn @bind-Value="item.OrderDate" Title="#OrderDate" />
        @* La livraison ne peut pas précéder la commande : borne minimale par ligne. *@
        <LgGridDateColumn @bind-Value="item.DeliveryDate"
                          Title="#DeliveryDate"
                          MinSelector="i => i.OrderDate" />
    </Columns>
</LgGridView>

Filter

Date filter.

Associated enumerations

DateBoxKind

Display mode of the date picker for the column (property DateBoxKind).

Value	Description
Day	Displays the calendar days (default value).
Month	Displays the calendar by month.
Week	Displays calendar days with week selection.

DataCalculationType

Type of calculation displayed in the column footer (inherited property CalculationType).

Value	Description
None	No calculation (default value).
Count	Number of items.
Sum	Sum of values.
Average	Average of values.
Min	Minimum value.
Max	Maximum value.

DataSortDirection

Default sort direction (inherited property DefaultSortDirection).

Value	Description
None	No sort (default value).
Asc	Ascending sort.
Desc	Descending sort.

Inherited edit modes (GridEditMode) are documented in LgGridView.

Complete reference

Generated from sources: API reference — LgGridDateColumn.

Related components

• LgGridView — the data grid that hosts the column.
• LgGridTextColumn — base column and inherited common parameters.
• LgGridTimeColumn — for times and durations.
• LgGridMonthColumn — specialized month column.
• LgGridWeekColumn — specialized week column.
• LgGridYearColumn — specialized year column.