Cell Edit Templates

This sample demonstrates how to use cell edit templates to create cell editors for simple and complex objects. The wjFlexGridCellTemplate introduces the cell local template variable containing an object that stores cell related information like item, row, col, value and values properties which are useful in template bindings. The last two properties mentioned here are specially intended for use in cell edit templates.

The Amount column uses a simple numeric value editor implemented using the wj-input-number component. The component is bound to the cell.value property that contains the cell value. By binding to the cell.value instead of an underlying item property, you allow FlexGrid to properly cancel the cell editing process on pressing the Esc key.

The Date Range column is bound to the start item property of the Date type, but actually shows start - end date range retrieved from two item properties. The cell editor uses two wj-input-date components to edit each end of the range in order to be consistent with the cell rendering. To cancel the editing process properly in this case, the template element assigns the valuePaths property with the {rangeEnd: 'item.end'} object, that defines the additional editing path (item.end) and its name (rangeEnd). According to this definition, the cell.values property contains the rangeEnd property with the value obtained using this path, and the second wj-input-date is bound to the cell.values.rangeEnd property. This way, the grid will properly cancel the editing process of both editing values.

The Person column is bound to the item property containing complex object represented by the Person class, which exposes the firstName and the lastName properties out of its interface. It uses the same technique as the Date Range column for cancelling the cell editing properly using two editor fields in a single cell.

{{format(cell.item.start, 'd')}} - {{format(cell.item.end, 'd')}} - {{cell.item[personCol.binding]?.firstName}} {{cell.values.ln}} First: Last: