The wjFlexGridColumn binding supports all read-write properties and events of
the Column class. The isSelected property provides two-way binding mode.
In addition to regular attributes that match properties in the Column class,
an element with the wjFlexGridColumn binding may contain a wjStyle binding that
provides conditional formatting and an HTML fragment that is used as a cell template. Grid
rows automatically stretch vertically to fit custom cell contents.
Both the wjStyle binding and the HTML fragment can use the $item observable variable in
KnockoutJS bindings to refer to the item that is bound to the current row. Also available are the
$row and $col observable variables containing cell row and column indexes. For example:
These bindings create two columns.
The first has a template that produces a hyperlink based on the bound item's "symbol" property.
The second has a conditional style that renders values with a color determined by a function
implemented in the controller.
KnockoutJS binding for the FlexGrid Column object.
The wjFlexGridColumn binding must be contained in a wjFlexGrid binding. For example:
<p>Here is a FlexGrid control:</p> <div data-bind="wjFlexGrid: { itemsSource: data }"> <div data-bind="wjFlexGridColumn: { header: 'Country', binding: 'country', width: '*' }"> </div> <div data-bind="wjFlexGridColumn: { header: 'Date', binding: 'date' }"> </div> <div data-bind="wjFlexGridColumn: { header: 'Revenue', binding: 'amount', format: 'n0' }"> </div> <div data-bind="wjFlexGridColumn: { header: 'Active', binding: 'active' }"> </div> </div>The wjFlexGridColumn binding supports all read-write properties and events of the Column class. The isSelected property provides two-way binding mode.
In addition to regular attributes that match properties in the Column class, an element with the wjFlexGridColumn binding may contain a wjStyle binding that provides conditional formatting and an HTML fragment that is used as a cell template. Grid rows automatically stretch vertically to fit custom cell contents.
Both the wjStyle binding and the HTML fragment can use the $item observable variable in KnockoutJS bindings to refer to the item that is bound to the current row. Also available are the $row and $col observable variables containing cell row and column indexes. For example:
<div data-bind="wjFlexGridColumn: { header: 'Symbol', binding: 'symbol', readOnly: true, width: '*' }"> <a data-bind="attr: { href: 'https://finance.yahoo.com/q?s=' + $item().symbol() }, text: $item().symbol"> </a> </div> <div data-bind="wjFlexGridColumn: { header: 'Change', binding: 'changePercent', format: 'p2', width: '*' }, wjStyle: { color: getAmountColor($item().change) }"> </div>These bindings create two columns. The first has a template that produces a hyperlink based on the bound item's "symbol" property. The second has a conditional style that renders values with a color determined by a function implemented in the controller.