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.
Here you can see how you can access other properties within your mapping.

---

###Formatted text with editable input and event binding###

<div><input type="text" data-bind="visible: $parent.selected(), value: $parent.entity[$data.field].toFixed(2), event: { blur: function() { $parent.$userViewModel.saveCalcItem($parent.entity, \'price\') } }" /><div class="kgCellText" data-bind="visible: !$parent.selected(), html: \'$ \'+$parent.entity[$data.field].toFixed(2)"></div></div>

This example has a little bit of everything, it contains a '$ ' before all prices in this particular column when not in edit mode. Force all $ amounts to be with 2 decimal places. When you are in edit mode (row has focus) then it provides an event mapping for the onblur event to call a function and recalculate the other columns based on my change.
In this example you can see how to format html in a div; control visibility based on if the row is selected; call a function within a binding; pass parameters to a function in a binding.

---

###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.