Cell Template Library

####If you have your own custom templates, please add to this!####

---

###Basic Editable Cell Template###

<input type="text" data-bind="value: $parent.entity[$data.field]" style="width: 80px"/>

---

###Editable Only When Selected Template###

<input type="text" data-bind="attr:{ readonly : !$parent.selected() },value: $parent.entity[$data.field]"/>

---

###Span when not selected, Editable when selected###

<div>
  <input type="text" data-bind="visible: $parent.selected(), value: $parent.entity[$data.field]" />
  <span data-bind="visible: !$parent.selected(), text: $parent.entity[$data.field]"></span>
</div>

---

###Change cell color based on other property###

<div type="text" data-bind="style:{ 'background-color' : $parent.entity['hasError'] ? 'red' : 'green' }, text: getProperty($parent)"></div>

---

###Editable checkbox###

<input type="checkbox" data-bind="checked: $parent.entity[$data.field], attr:{'class': 'kgCellText colt' + $index)}"/>

You have to set afterSelectionChange to true in the GridOptions, so the click propagates to the checkbox.

---

###Date Format Cell Template###

<div data-bind="attr: { \'class\': \'kgCellText colt\' + $index()}, html: $.format.date($data.getProperty($parent), \'dd/MM/yyyy\')"/>

You have to include the jQuery Date Format library dateFormat.

---