Grid Components - Templating Examples

DataFormatString - Simple Formatting

Use DataFormatString for simple formatting without templates. Supports standard .NET format strings like "C" (currency), "N2" (number with 2 decimals), "P" (percentage), and "d" (short date).

Format Examples:

DataFormatString="C" → Currency: $1,234.56
DataFormatString="N0" → Integer: 1,234
DataFormatString="N2" → Number: 1,234.56
DataFormatString="P2" → Percentage: 45.67%
DataFormatString="d" → Short date: 12/31/2024
DataFormatString="D" → Long date: Tuesday, December 31, 2024

View Code

<GridColumn Field="Amount" Header="Amount" DataFormatString="C" />
<GridColumn Field="OrderDate" Header="Order Date" DataFormatString="d" />
<GridColumn Field="Id" Header="Order ID" DataFormatString="N0" />

Custom Cell Templates

Custom cell rendering using Badge for status and formatted currency for amounts. For simple formatting, consider using DataFormatString instead (see Demo 5).

View Code

<GridColumn Field="Status" Header="Status">
    <CellTemplate Context="order">
        <Badge Variant="@GetStatusVariant(order.Status)">@order.Status</Badge>
    </CellTemplate>
</GridColumn>

Custom Header Templates

Custom header rendering with icons for enhanced visual hierarchy.

View Code

<GridColumn Field="Customer">
    <HeaderTemplate>
        <div class="flex items-center gap-2">
            <LucideIcon Name="user" Size="16" />
            <span>Customer</span>
        </div>
    </HeaderTemplate>
</GridColumn>

Row Actions

Action buttons that trigger C# methods via data-action attributes. Uses Blazor components with automatic event binding.

View Code

<Grid Items="@orders" ActionHost="this">
    <Columns>
        <GridColumn Id="actions" Header="Actions">
            <CellTemplate Context="order">
                <!-- ✅ Use Blazor components with data-action attributes -->
                <Button data-action="Edit">
                    <LucideIcon Name="pencil" />
                </Button>
                <Button data-action="Delete">
                    <LucideIcon Name="trash-2" />
                </Button>
            </CellTemplate>
        </GridColumn>
    </Columns>
</Grid>

@code {
    // ✅ Auto-discovery: Just add [GridAction] attribute!
    // Method names match data-action values
    [GridAction]
    private void Edit(Order order)
    {
        Toasts.Show($"Editing order #{order.Id}");
    }
    
    [GridAction]
    private void Delete(Order order)
    {
        Toasts.Error($"Deleting order #{order.Id}");
    }
}

Conditional Styling

Dynamic CSS classes applied based on data values (high-value orders in green, cancelled in red).

View Code

@code {
    private string GetAmountClass(decimal amount) 
        => amount > 5000 ? "font-bold text-green-600" : "";
}