DataGrid / Rows / Row Template

Blazor DataGrid Example - Row Templates

Loading Syncfusion Blazor Server Demos…

sfgridqxxzv0mcfh0_header_table

Employee Image

Employee Details

First Name	Nancy
Last Name	Davolio
Title	Sales Representative
Birth Date	12/8/1948
Hire Date	5/1/1992

First Name	Andrew
Last Name	Fuller
Title	Vice President, Sales
Birth Date	2/19/1952
Hire Date	8/14/1992

First Name	Janet
Last Name	Leverling
Title	Sales Representative
Birth Date	8/30/1963
Hire Date	4/1/1992

First Name	Margaret
Last Name	Peacock
Title	Sales Representative
Birth Date	9/19/1937
Hire Date	5/3/1993

First Name	Steven
Last Name	Buchanan
Title	Sales Manager
Birth Date	3/4/1955
Hire Date	10/17/1993

First Name	Michael
Last Name	Suyama
Title	Sales Representative
Birth Date	7/2/1963
Hire Date	10/17/1993

First Name	Robert
Last Name	King
Title	Sales Representative
Birth Date	5/29/1960
Hire Date	1/2/1994

First Name	Laura
Last Name	Callahan
Title	Inside Sales Coordinator
Birth Date	1/9/1958
Hire Date	3/5/1994

First Name	Anne
Last Name	Dodsworth
Title	Sales Representative
Birth Date	1/27/1966
Hire Date	11/15/1994

This sample demonstrates the DataGrid row template feature for customizing row appearance and layout.

The Blazor DataGrid row template feature allows you to customize the appearance and behavior of DataGrid rows. The GridTemplates component wraps the RowTemplate property.

The row template content must consist of TD elements. The number of TD elements must match the number of DataGrid columns to ensure proper data alignment and display.

In this demo, the row template displays employee information with photographs in the first column and additional employee details such as name and address in subsequent columns, creating a rich, multi-column layout.

For more detailed information about row templates, refer to the row template documentation.