Templates and Conditional Formatting

Wijmo is not opinionated about templating mechanisms. It does however provide a flexible infrastructure that allows you to easily integrate templating mechanisms provided by whatever framework you choose.

This sample uses AngularJS, which provides a great templating mechanism. Our FlexGrid directive leverages AngularJS templates and allows you to specify cell templates directly in the markup. The directive uses the grid's itemFormatter function to evaluate the templates and generate the cell content.

The markup looks very similar to what you would use when creating regular tables in AngularJS, or grids in XAML: 

<wj-flex-grid 
  class="grid" 
  items-source="ctx.data"
  is-read-only="true">
    <wj-flex-grid-column header="ID" binding="id" width="80"></wj-flex-grid-column>
    <wj-flex-grid-column header="Date" binding="start"></wj-flex-grid-column>
    <wj-flex-grid-column header="Product" binding="product">
      <span class="glyphicon glyphicon-{​{['leaf', 'fire', 'magnet'][$item.productId] }}"></span>
        {​{$item.product}}
    </wj-flex-grid-column>
    <wj-flex-grid-column header="Revenue" binding="amount" format="n0"></wj-flex-grid-column>
    <wj-flex-grid-column header="Expense" binding="amount2" format="n0"></wj-flex-grid-column>
    <wj-flex-grid-column header="Discount" binding="discount" format="p0" 
        ng-style="{true:{color:'red'}, false:{color:'green'}}[$item.discount > 0.12]">
    </wj-flex-grid-column>
</wj-flex-grid>

Notice how the third grid column contains some HTML. The directive uses that HTML content as a column template. The directive inserts three scope variables that you can use in the template: $row, $column, and $item. These variables contain references to the cell's row, column, and bound data item. The template uses the $item property to insert an icon in the cell.

The last column contains an ng-style attribute that causes items with discounts higher than 12% to be shown in red. The syntax for the style is a little obscure because Angular did not support ternary operators until version 1.1.5 (a good reason to upgrade to the latest version of Angular).

{{$item.product}}