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.
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.
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.
This grid uses the wjFlexGridDetail directive and specifies a template defined as HTML content, including a list created with an ngFor directive.