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 Angular 2 , which provides a great templating mechanism. Our FlexGrid component leverages Angular 2 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 Angular 2, or grids in XAML:
<wj-flex-grid #flex class="grid" [itemsSource]="data" [isReadOnly]="true" (itemsSourceChanged)="itemsSourceChangedHandler()"> <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'"> <template wjFlexGridCellTemplate [cellType]="'Cell'" #item="item"> <div [ngStyle]="{color: item.productId == 1 ? 'darkred' : 'darkgreen'}"> <span [ngClass]="'glyphicon ' + 'glyphicon-' + [ 'leaf', 'fire', 'magnet' ][item.productId]"></span> {{item.product}} </div> </template> </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'"> <template wjFlexGridCellTemplate [cellType]="'Cell'" #item="item"> <div [ngStyle]="{color: item.discount > 0.12 ? 'darkred' : 'darkgreen'}"> {{item.discount | percent:'1.0-0'}} </div> </template> </wj-flex-grid-column> </wj-flex-grid>
Notice how the third and the last grid columns contains a template element with a wjFlexGridCellTemplate directive, with some HTML inside the template. The directive uses that HTML content as a column template. The directive inserts three local 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 variable to insert an icon in the cell.
The template of the last column contains a div element with an ngStyle directive that causes items with discounts higher than 12% to be shown in red.