Blazorise DataGrid: Display Template

Blazor includes templated components that can accept one or more UI segments as input and render them as part of the component during component rendering. DataGrid is a templated Blazor component that lets you customize various parts of the user interface with template parameters. It enables you to generate custom components or content using your own logic.

DisplayTemplate

Display template uses CellDisplayContext<TItem> as a context value, exposing the item, column, and display metadata for the cell.
Date Of Birth
8/26/1970 | Age: 56
5/25/1974 | Age: 52
4/29/1969 | Age: 57
2/12/1984 | Age: 42
11/6/1983 | Age: 43
10/2/1995 | Age: 31
3/15/1978 | Age: 48
7/1/1970 | Age: 56
6/24/1993 | Age: 33
9/18/1992 | Age: 34
<DataGrid TItem="Employee"
          Data="@employeeList"
          Responsive>
    <DataGridNumericColumn Field="@nameof( Employee.DateOfBirth )" Caption="Date Of Birth" Editable>
        <DisplayTemplate>
            @{
                var date = context.Item?.DateOfBirth;

                if ( date != null )
                {
                    @($"{date.Value.ToShortDateString()} | Age: {( DateTime.Now.Year - date.Value.Year )}")
                }
            }
        </DisplayTemplate>
    </DataGridNumericColumn>
</DataGrid>

@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;


    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page