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 is using TItem as a context value.
Date Of Birth
8/26/1970 | Age: 54
5/25/1974 | Age: 50
4/29/1969 | Age: 55
2/12/1984 | Age: 40
11/6/1983 | Age: 41
10/2/1995 | Age: 29
3/15/1978 | Age: 46
7/1/1970 | Age: 54
6/24/1993 | Age: 31
9/18/1992 | Age: 32
<DataGrid TItem="Employee"
          Data="@employeeList"
          Responsive>
    <DataGridNumericColumn Field="@nameof(Employee.DateOfBirth)" Caption="Date Of Birth" Editable>
    <DisplayTemplate>
        @{
            var date = ( context as Employee )?.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