Skip to main content

LgGridCustomColumn

LgGridCustomColumn<TColumnValue> is the generic column of LgGridView: it accepts a value of any type. By default the value is displayed as text (DisplayFormat is applied if the value implements IFormattable, otherwise ToString()) ; the CellContent and EditCellContent templates allow you to customize its rendering.

<Columns Context="item">
    <LgGridCustomColumn @bind-Value="item.Reference" Title="#Reference">
        <CellContent Context="cell">
            <LgIcon IconName="@IconNames.All.Tag" />
            @cell.Value.Code
        </CellContent>
    </LgGridCustomColumn>
</Columns>
  • Namespace : Lagoon.UI.Components
  • Inherits from : LgGridBaseValueColumn<TItem, TColumnValue>
  • NuGet package : Lagoon.UI.GridView
No default filter

Since the type of the value is unknown, the column has no filter: the filter cell remains empty and any DefaultFilter is ignored. To filter, use the specialized column corresponding to the type (LgGridTextColumn, LgGridNumericColumn, LgGridDateColumn, LgGridBooleanColumn, LgGridEnumColumn…) or provide your own FilterCellContent. Sorting, however, remains available as soon as a sort key is determined (SortSelector or ValueSelector).

Filter parameters (AllowFilter, DefaultFilter, FilterExpression, FilterShowAllItems, FilterDisableSelection, FilterCellContent, MinSearchFilterCharacter) are not declared on this column: they belong to filterable columns.

Text column

If the linked value is a string, prefer LgGridTextColumn: it avoids having to reason about TColumnValue and preserves text filtering.

Usage​

Demonstration​

Try this component in the Lagoon showcase.

Business value and custom rendering​

CellContent receives a context exposing the cell value (cell.Value) and the row (cell.Item). The default Context is named context.

GridCustomColumnPage.razor
@inherits LgPage

<LgGridView StateId="orders-custom-column" Items="_orders" Title="#OrdersGridTitle">
    <Columns Context="item">
        <LgGridCustomColumn @bind-Value="item.Reference" Title="#Reference">
            <CellContent Context="cell">
                <LgIcon IconName="@IconNames.All.Tag" />
                @cell.Value.Code (@cell.Item.CustomerName)
            </CellContent>
        </LgGridCustomColumn>
        <LgGridCustomColumn @bind-Value="item.Identifier" Title="#Identifier" DefaultVisible="false" />
    </Columns>
</LgGridView>
GridCustomColumnPage.razor.cs
public partial class GridCustomColumnPage : LgPage
{
    private List<OrderRow> _orders = new();

    private sealed class OrderRow
    {
        // Business type: displayed via the CellContent template.
        public OrderReference Reference { get; set; }

        // Non-text type: the column displays the result of ToString().
        public Guid Identifier { get; set; }

        public string CustomerName { get; set; }
    }
}
Row context capture

The grid's Columns fragment is evaluated only once (with a model element): in a cell template, do not use the variable declared by <Columns Context="…"> but cell.Item.

Calculated value with ValueSelector​

ValueSelector (Expression<Func<TItem, TColumnValue>>) provides the column value per row without @bind-Value, so without capturing the <Columns> context. It is a complete provider: the returned value feeds the display, sorting, and grouping. A calculated expression (below) makes the column read-only; a simple member path (row => row.Reference) would remain editable. Without @bind-Value, specify TItem.

GridComputedColumnPage.razor
@inherits LgPage

<LgGridView StateId="orders-computed-column" Items="_orders" Title="#OrdersGridTitle">
    <Columns Context="item">
        @* Total = quantity × unit price: derived value, displayed read-only. *@
        <LgGridCustomColumn TItem="OrderRow" TColumnValue="decimal"
                            Title="#LineTotal"
                            DisplayFormat="C2"
                            ValueSelector="@(i => i.Quantity * i.UnitPrice)"
                            SortSelector="@(i => i.Quantity * i.UnitPrice)" />
    </Columns>
</LgGridView>
Remote vs local

A calculated key does not translate to a remote query: sorting remains operating locally. A simple member path, on the other hand, translates and also works server-side. See the Per-row selectors of LgGridTextColumn section.

Filter​

None: OnGetFilterType returns null, the column displays an empty filter cell.

Complete reference

Sheet generated from sources: API reference — LgGridCustomColumn.