The wj-flex-grid-detail directive must be contained in a wj-flex-grid directive.

The wj-flex-grid-detail directive represents a FlexGridDetailProvider object that maintains detail rows visibility, with detail rows content defined as an arbitrary HTML fragment within the directive tag. The fragment may contain AngularJS bindings and directives. In addition to any properties available in a controller, the local $row and $item template variables can be used in AngularJS bindings that refer to the detail row's parent Row and Row.dataItem objects. For example:

<p>Here is a detail row with a nested FlexGrid:</p>
 
<wj-flex-grid
  items-source="categories">
  <wj-flex-grid-column header="Name" binding="CategoryName"></wj-flex-grid-column>
  <wj-flex-grid-column header="Description" binding="Description" width="*"></wj-flex-grid-column>
  <wj-flex-grid-detail max-height="250" detail-visibility-mode="detailMode">
    <wj-flex-grid
      items-source="getProducts($item.CategoryID)"
      headers-visibility="Column">
    </wj-flex-grid>
  </wj-flex-grid-detail>
</wj-flex-grid>

A reference to a FlexGridDetailProvider object represented by the wj-flex-grid-detail directive can be retrieved in a usual way by binding to the directive's control property. This makes all the API provided by FlexGridDetailProvider available for usage in the template, giving you total control over the user experience. The following example adds a custom show/hide toggle to the Name column cells, and a Hide Detail button to the detail row. These elements call the FlexGridDetailProvider, hideDetail and showDetail methods in their ng-click bindings to implement the custom show/hide logic:

<p>Here is a FlexGrid with custom show/hide detail elements:</p>
 
<wj-flex-grid
  items-source="categories"
  headers-visibility="Column"
  selection-mode="Row">
  <wj-flex-grid-column header="Name" binding="CategoryName" is-read-only="true" width="200">
    <img ng-show="dp.isDetailVisible($row)" ng-click="dp.hideDetail($row)" src="resources/hide.png" />
    <img ng-hide="dp.isDetailVisible($row)" ng-click="dp.showDetail($row, true)" src="resources/show.png" />
    {​{$item.CategoryName}}
  </wj-flex-grid-column>
  <wj-flex-grid-column header="Description" binding="Description" width="2*"></wj-flex-grid-column>
  <wj-flex-grid-detail control="dp" detail-visibility-mode="Code">
    <div style="padding:12px;background-color:#cee6f7">
      ID: <b>{​{$item.CategoryID}}</b><br />
      Name: <b>{​{$item.CategoryName}}</b><br />
      Description: <b>{​{$item.Description}}</b><br />
      <button class="btn btn-default" ng-click="dp.hideDetail($row)">Hide Detail</button>
    </div>
  </wj-flex-grid-detail>
</wj-flex-grid>

The wj-flex-grid-detail directive supports the following attributes:

control

= A reference to the FlexGridDetailProvider object created by this directive.

detail-visibility-mode

@A DetailVisibilityMode value that determines when to display the row details.

max-height

@The maximum height of the detail rows, in pixels.

row-has-detail

=The callback function that determines whether a row has details.