Nested Grid

 
Contact Name Company Name Country City
Alejandra Camino Romero y tomillo Spain Madrid
Alexander Feuer Morgenstern Gesundkost Germany Leipzig
Ana Trujillo Ana Trujillo Emparedados y helados Mexico México D.F.
Anabela Domingues Tradição Hipermercados Brazil Sao Paulo
André Fonseca Gourmet Lanchonetes Brazil Campinas
Ann Devon Eastern Connection UK London
Annette Roulet La maison d'Asie France Toulouse
Antonio Moreno Antonio Moreno Taquería Mexico México D.F.
Aria Cruz Familia Arquibaldo Brazil Sao Paulo
Art Braunschweiger Split Rail Beer & Ale USA Lander

The DevExpress Blazor Grid component allows you to create hierarchical layouts of any complexity and depth. This demo module illustrates how to use a nested grid component to visualize a master-detail relationship between two data tables. To replicate the capabilities of this demo, follow the steps below:

  1. Add a master grid to your application.
  2. Bind the master grid to data and add columns to its Columns collection.
  3. Add the DetailRowTemplate to the grid's markup to create a detail view.
  4. (Optional) We recommend that you allocate the detail grid to a separate component. Separation improves app structure and prevents excessive component redraw operations.
  5. Add a second data grid to the template. Bind this grid to a detail data source that uses the template's context object as a filter criteria.
  6. (Optional) To collapse an expanded detail row when a new detail row is displayed on-screen, set the AutoCollapseDetailRow property to true.

Row Preview

 
First Name Last Name Title Hire Date
Nancy Davolio Sales Representative 5/1/2005
Nancy received a BA degree in psychology from Colorado State University in 2000. She also completed "The Art of the Cold Call" course. She is a member of Toastmasters International.
Andrew Fuller Vice President, Sales 8/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.
Janet Leverling Sales Representative 4/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.
Margaret Peacock Sales Representative 5/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.
Steven Buchanan Sales Manager 10/17/1993
Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London. He was promoted to sales manager in March 1993. Mr. Buchanan completed the courses: "Successful Telemarketing" and "International Sales Management." He is fluent in French.

This demo illustrates how to display preview sections under each Grid data row across all columns. These sections can display any content, including tables, values from data source fields, custom text, etc. To replicate the capabilities of this demo, follow the steps below:

  1. Add a grid to your application.
  2. Bind the grid to data and add columns to its Columns collection.
  3. Add the DetailRowTemplate to the grid's markup and define a row preview template.
  4. Set the DetailRowDisplayMode property to GridDetailRowDisplayMode.Always.