Native Blazor Components powered by DevExpress

Column Templates

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

First Name	Last Name	Title	Title Of Courtesy	Birth Date	Hire Date
Nancy	Davolio	Sales Representative	Ms.	12/8/1978	5/1/2005
Andrew	Fuller	Vice President, Sales	Dr.	2/19/1965	8/14/1992
Janet	Leverling	Sales Representative	Ms.	8/30/1985	4/1/2002
Margaret	Peacock	Sales Representative	Mrs.	9/19/1973	5/3/1993
Steven	Buchanan	Sales Manager	Mr.	3/4/1955	10/17/1993
Michael	Suyama	Sales Representative	Mr.	7/2/1981	10/17/1999
Robert	King	Sales Representative	Mr.	5/29/1960	1/2/1994
Laura	Callahan	Inside Sales Coordinator	Ms.	1/9/1985	3/5/2004
Anne	Dodsworth	Sales Representative	Ms.	1/27/1980	11/15/2004

You can use the DisplayTemplate and EditTemplate properties to specify custom content for the column and its editor. Use the template's context parameter to access a data object and its fields.

When you use an edit template with complex dependencies between editors, you should call the CellEditContext.OnChanged method to inform the editors about changes in each other and save new cell values to the EditedValues collection. Then, the Data Grid passes this collection to the RowInserting and RowUpdating events.

This demo customizes the Details column. The display template shows the More Info... links. Users can click these links to view details about data rows in a pop-up window. The edit template embeds the Memo component into the edit form.

Row Preview Template

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

First Name	Last Name	Position	Birth Date	Hire Date

Andrew	Fuller	Vice President, Sales	Friday, February 19, 1965	Friday, August 14, 1992
Andrew received his BTS commercial in 1987 and a Ph.D. in international marketing at the University of Dallas in 1994. He speaks French and Italian fluently, and reads German. He joined the company as a sales representative. After that, he was promoted to sales manager in January 2005 and vice president of sales in March 2006. Andrew is a member of the Sales Management Round table, Seattle Chamber of Commerce, and Pacific Rim Importers Association.
Anne	Dodsworth	Sales Representative	Sunday, January 27, 1980	Monday, November 15, 2004
Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.
Janet	Leverling	Sales Representative	Friday, August 30, 1985	Monday, April 1, 2002
Janet received a BS degree in chemistry at Boston College in 2006. She also completed a certificate program in food retailing management. Janet was hired as a sales associate in 2013 and promoted to sales representative in February 2014.
Laura	Callahan	Inside Sales Coordinator	Wednesday, January 9, 1985	Friday, March 5, 2004
Laura received a BA degree in psychology from the University of Washington. She also completed a course in business French. She reads and writes French.
Margaret	Peacock	Sales Representative	Wednesday, September 19, 1973	Monday, May 3, 1993
Margaret received a BA degree in English literature at Concordia College (1994) and an MA at the American Institute of Culinary Arts (2002). She was temporarily assigned to the London office from July until November 2008.
Michael	Suyama	Sales Representative	Thursday, July 2, 1981	Sunday, October 17, 1999
Michael is a graduate of Sussex University (MA, economics, 2001) and the University of California at Los Angeles (MBA, marketing, 2004). He also took the courses "Multi-Cultural Selling" and "Time Management for the Sales Professional." He is fluent in Japanese and can read and write French, Portuguese, and Spanish.

This demo illustrates how to use the Data Grid's RowPreviewTemplate property to show preview sections under each data row across all columns. These sections can display any content, such as tables, images, values from data source fields, custom text, and so on.

The template's Context parameter has the following properties:

RowIndex — Returns a zero-based row index.
DataItem — Returns a data item that corresponds to the row.

When you define the row preview template, use the Columns property to add Data Grid columns.

Column Templates Row Preview Template

Did this demo address your needs?