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.

---

###Date Format To Local Time Cell Template###

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

You have to include the jQuery Date Format library dateFormat. Notice also that we must first pass the date/time into Date(), otherwise the timezone is not calculated correctly (example date: "2015-02-13T23:00:53Z").

---

###Utilize a KnockoutJS component as Cell Content### KnockoutJS components are a very useful and versatile way of encapsulating, packaging, and distributing code for user controls that can support complex behaviors. More information on components can be found in the KnockoutJS documentation on components.

<div data-bind="attr: { 'class': 'kgCellText colt' + $index() + ' ' + $parent.entity['modelObject'].boundCssProperty}, component: { name: $parent.entity['modelObject'].boundNameProperty, params: { objModel: $parent.entity['modelObject']}} "></div>

This assumes you have registered KnockoutJS components and that they all have the following structure:

koComponent
    modelObject - the model object to allow manipulation of the component when it is instantiated.
        boundNameProperty - the registered KnockoutJS name of the component.
        boundCssProperty - a ko.observable() or ko.computed() that returns a string of valid CSS class(es).
    viewModel - the view model of the component
    template - the HTML template of the component used by KnockoutJS.

Note: the viewModel and template are used by KnockoutJS to actually define the component.

By manipulating properties and functions of the "modelObject", you can interact with the contents of the component, and therefore the cell. Having the properties bound will, of course, also allow user changes to be propagated back and acted upon. The properties displayed are for example only to show how to access them in the template; you are free to use whatever property names you wish.