Customize Cells Using CellTemplate

CellTemplate provides a declarative approach for customizing cell content using Razor markup. This approach is suitable for lightweight rendering scenarios that require static or minimally interactive content.

The template context provides direct access to the underlying row data and is the recommended mechanism for retrieving cell data during customization.

Step 1: Configure the FlexGrid

Define the grid and disable auto-generated columns.

<FlexGrid ItemsSource="customers"
          AutoGenerateColumns="false"
          SelectionMode="GridSelectionMode.Row">

Step 2: Define Standard Columns

Bind columns to display data fields.

<FlexGridColumns>    
    <GridColumn Binding="FirstName" Header="First Name" />
    <GridColumn Binding="LastName" Header="Last Name" />

Step 3: Add a Template Column

Insert a column that contains a CellTemplate.

<GridColumn>
    <CellTemplate>
        @{
            Customer customer = (Customer)context;
        }
        <button @onclick="(() => ShowInfo(customer))">Info</button>
    </CellTemplate>
</GridColumn>

If the GridColumn.Binding property is empty, the entire row data item is passed to the template context. Otherwise, only the bound field value is provided.

Step 4: Implement the Event Handler

Process the row data passed through the template context.

@code {
    List<string> info = new();

    void ShowInfo(Customer customer)
    {
        info.Add($"Customer: {customer.FirstName} {customer.LastName}");
    }
}

Complete Code Example

After completing these steps, FlexGrid displays two standard data columns (First Name and Last Name) together with a custom column that contains an Info button in each row.

When the Info button is clicked, the application retrieves the corresponding row data directly from the template context and processes it in the ShowInfo method.

<FlexGrid ItemsSource="customers"
          IsReadOnly="true"
          AutoGenerateColumns="false"
          SelectionMode="GridSelectionMode.Row">
    <FlexGridColumns>
        <GridColumn Binding="FirstName" Header="First Name" />
        <GridColumn Binding="LastName" Header="Last Name" />

        <!-- Custom column with CellTemplate -->
        <GridColumn>
            <CellTemplate>
                @{
                    Customer customer = (Customer)context;
                }
                <button @onclick="(() => ShowInfo(customer))">
                    Info
                </button>
            </CellTemplate>
        </GridColumn>
    </FlexGridColumns>
</FlexGrid>

@code {
    List<string> info = new();

    void ShowInfo(Customer customer)
    {
        info.Add($"Customer: {customer.FirstName} {customer.LastName}");
    }
}

Note: Retrieving row data through the template context is the recommended approach for template-based customization scenarios.