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 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
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.