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").

---

###Hover Text Cell Template###

<div class="kgCellText" data-bind="html: $parent.entity[$data.field], attr: { title: $parent.entity.PriceDescription }"></div>

So, in this example I actually have the cell bound to the property 'Price', but I want to display a description when you mouse-over the price. Here I map the "title" attribute to the other property in my object called 'PriceDescription'. I do not have a row within the koGrid mapped to the 'PriceDescription' property, it is only used for this tooltip. You can see how you can access other properties within your object.

---

###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[$data.field].boundCssProperty }, component: { name: $parent.entity[$data.field].boundNameProperty, params: { objModel: $parent.entity[$data.field]}} \"></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 "model" object, 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. And of course, the component can have whatever other properties or functions necessary to display data for its cell.

gridOptions.data = { field1: new koComponent('fresh'), field2: new koComponent('example') };
gridOptions.columnDefs = [{ field: field1, displayName: 'Field 1' }, { field: field2, displayName: 'Field 2' }];

Since each "koComponent" model object has the properties for "boundNameProperty" and "boundCssProperty", you can swap out any compatible KnockoutJS component that supports this structure and koGrid will utilize it automatically.

An example can be found at sjFiddle.