Customize Your JavaScript Data Grids with RowDetails

Customize your JavaScript data grid with Wijmo FlexGrid’s RowDetails feature, which creates a “detail” row with any information you want in it. With RowDetails, you can quickly and easily provide your users with more information without having to create multiple grids, keeping all of your information in one place.

Plus, RowDetails — like the rest of Wijmo FlexGrid — is highly extensible: you can customize how rows are displayed, how users can view detail rows, and more. Let’s take a look at the RowDetails demo for some of the ways you can customize RowDetails for your project.

Implement Detail Rows with the FlexGridProvider Class

Implement detail rows in Wijmo FlexGrid with the FlexGridDetailProvider class; its createDetailCell function creates HTML elements for showing details in rows.

The first grid in the RowDetails demo uses the FlexGridDetailProvider class — which is for PureJS usage — directly. Here's the code for it:

// create FlexGridDetailProvider for "flex" control
var dp = new wijmo.grid.detail.FlexGridDetailProvider(flex);
dp.maxHeight = 250;
// create and host detail cells
dp.createDetailCell = (row) => {
  var cell = document.createElement('div');
  var detailGrid = new wijmo.grid.FlexGrid(cell);
  detailGrid.itemSource = this.getProducts(row.dataItem.CategoryID);
  detailGrid.headersVisibility = wijmo.grid.HeadersVisibility.Column;
  return cell;
}
// remove details from items with odd CategoryID
dp.rowHasDetail = function (row) {
    return row.dataItem.CategoryID % 2 == 0;
}

You can animate the expansion of detail rows by setting the isAnimated property to true, limit the height of detail rows, and determine which rows show detail rows (in this example, only rows with an even Category ID number show detail rows).

Adding Detail Rows with the wj-flex-grid-detail Directive

If you're using the RowDetails extension in Angular as markup instead of JavaScript, you can add detail rows using the wj-flex-grid-detail directive, which has a template with a nested FlexGrid. In the RowDetails demo, the nested grid shows all of the product’s in a row’s category, along with their quantity per unit, unit price, and their status (discontinued or not).

The markup for this grid looks like this:

<wj-flex-grid [allowDragging]="'Both'"
              [itemSource]="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>
    <ng-template wjFlexGridDetail [maxHeight]="250" [detailVisibilityMode]="detailMode" let-item="item">
        <wj-flex-grid [itemSource]="getProducts(item.CategoryID)"
                      [headersVisibility]="'Column'">
            <wj-flex-grid-column [header]="'ID'" [binding]="'ProductID'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Name'" [binding]="'ProductName'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Qty/Unit'" [binding]="'QuantityPerUnit'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Unit Price'" [binding]="'UnitPrice'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Discontinued'" [binding]="'Discontinued'"></wj-flex-grid-column>
       </wj-flex-grid>
    </ng-template>
</wj-flex-grid>

The grid itself looks like this:

You can also customize your JavaScript data grid with the detailVisibilityMode property, which determines how users can view detail rows. The property has four values: Code, Selection, ExpandSingle, and ExpandMulti. The Code value means the detail rows are shown or hidden in the coding, and the Selection value means users have to select a row to view its detail rows. With the ExpandSingle value (the default value for detailVisibilityMode), users can only expand one row at a time: the expanded detail row collapses when they expand another. As shown in the screenshot below, a user can expand multiple columns at a time when the ExpandMulti value is set.

Using the Directive with Other Templates

If you don’t want to use the wj-flex-grid-detail directive’s template with the nested FlexGrid, that’s totally fine! You can use the directive with other templates. For example, the third grid in the RowDetails demo specifies a template defined as HTML content. The content includes a list created using an ngFor directive, which repeats a template.

Here's what the markup looks like for this template:

<wj-flex-grid [itemSource]="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>
    <ng-template wjFlexGridDetail [detailVisibilityMode]="'ExpandSingle'" #item="item">
        ID: <b>{{item.Category.ID}}</b><br />
        Name: <b>{{item.CategoryName}}</b><br />
        Description: <b>{{item.Description}}</b><br />
        <ol>
            <li *ngFor="let p of getProducts(item.CategoryID).items">{{p.ProductName}}</li>
        </ol>
    </ng-template>
</wj-flex-grid>

The ngFor directive displays the product names in an ordered list, so a detail row in this grid looks like this:

Adding Custom Elements

As mentioned earlier, RowDetails — and Wijmo FlexGrid itself — is highly extensible and customizable, so you can make data grids that fit your needs and project. Because you can access the methods in the wj-flex-grid-detail directive’s FlexGridDetailProvider class through its “control” attribute, you’re in control of how detail rows appear to a user and how they behave.

The RowDetails demo uses the FlexGridDetailProvider class’ methods to add custom icons for expanding and collapsing detail rows This grid also adds buttons within the detail rows for collapsing them.

The markup for this demo grid looks like this:

<wj-flex-grid [itemSource]="categories"
              [headersVisibility]="'Column'"
              [selectionMode]="'Row'">
    <ng-template wjFlexGridDetail #dp="wjFlexGridDetail" [detailVisibilityMode]="'Code'" let-item="item">
        <div style="padding:12px;background-color:#cee6f7;color:#000">
            ID: <b>{{item.CategoryID}}</b><br />
            Name: <b>{{item.CategoryName}}</b><br />
            Description: <b>{{item.Description}}</b><br />
            <button class="btn btn-default" (click)="dp.hideDetail(row)">Hide Detail</button>
        </div>
   </ng-template>
   <wj-flex-grid-column [header]="'Name'" [binding]="'CategoryName'" [isReadOnly]="true" [width]="200">
       <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
           <span [ngStyle]="{display: dp?.isDetailAvailable(row) ? '' : 'none'}">
               <img [ngStyle]="{display: dp.isDetailVisible(row) ? '' : 'none'}" (click)="dp.hideDetail(row)" src="resources/hide.png" />
               <img [ngStyle]="{display: !dp?.isDetailVisible(row) ? '' : 'none'}" (click)="dp.showDetail(row, true)" src="resources/show.png" />
           </span>
                       {{item.CategoryName}} -{{dp.isDetailAvailable(row)}}
      </ng-template>
  </wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Description'" [binding]="'Description'" [width]="'2*'"></wj-flex-grid-column>
</wj-flex-grid>

A detail row — and the custom expand/collapse icons — look like this in the grid:

Download your 30-day free trial of Wijmo to explore Wijmo FlexGrid’s RowDetails and its other extensible features.