### Row Details

Important! This feature requires the wijmo.grid.detail extension module.

Each row in the following grids represents a product category. To see the products in each category, expand the rows by clicking the plus sign. Expanded row shows another row containing arbitrary content (in this case, a nested grid with product information) and is called as a "detail" row.

The detail rows are implemented using the FlexGridDetailProvider class. The FlexGridDetailProvider class has a createDetailCell function that creates HTML elements to show the details for any row. Content of the detail cells can be customized completely.

In addition to the createDetailCell function, the FlexGridDetailProvider class has other properties that allow you to customize when the detail rows are displayed. For example: dimensions of detail row etc.

### Using the FlexGridDetailProvider class

This grid uses the FlexGridDetailProvider class directly. It specifies a createDetailCell function that creates child grids to show the products in the category represented by the main row.

### Using the wjFlexGridDetail directive

This grid uses the wjFlexGridDetail directive. The directive is defined on a template with a child FlexGrid that shows the products in the category represented by the main row.

Select a value for the detailVisibilityMode property to determine when the row details are visible.

Code Selection ExpandSingle ExpandMulti

### Using the wjFlexGridDetail directive with another template

This grid uses the wjFlexGridDetail directive and specifies a template defined as HTML content, including a list created with an ngFor directive.

ID: {{item.CategoryID}}
Name: {{item.CategoryName}}
Description: {{item.Description}}

1. {{p.ProductName}}