wjFlexGridColumn Class

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.