Knockout Grid Computed Value
Knockout Grid
Computed Value
Issue
HTML
<script src="https://raw.github.com/SteveSanderson/knockout/v2.2.1/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/Knockout-Contrib/KoGrid/master/koGrid-2.1.1.debug.js"></script>
<link rel="stylesheet" href="http://ericmbarnard.github.com/KoGrid/css/KoGrid.css">
<body>
Hello World
Name : <strong data-bind="text: name"></strong>
<div style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;" data-bind="koGrid: gridOptions"></div>
</body>
JavaScript
var datastore = {
initialData: [
{name: "Nthdimenzion", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
]
}
function Item(data) {
this.name = ko.observable(data.name);
this.age = ko.observable(data.age);
this.computedAge = ko.computed(function(){
return 100 - this.age();
}, this);
}
var ViewModel = function AppVM() {
var self = this
self.editableCellTempate = '<input type="text" data-bind="attr: { \'class\':\'kgCellText colt\' + $index()}, value: $parent.entity[\'age\']"/>'
self.name = "Hello Sudarshan";
self.browsers = ko.observableArray(
ko.utils.arrayMap(
datastore.initialData,
function(data){ return new Item(data); }
)
);
self.gridOptions = { data: self.browsers, selectedItems: self.selectedItems, columnDefs: [
{field: 'name', displayName: 'Name'},
{field: 'age', displayName: 'Age', cellTemplate: self.editableCellTempate } ,
{field: 'computedAge', displayName: '100 -Age',cellTemplate:self.calculatedCellTemplate}
]
};
}
var appVM = new ViewModel()
ko.applyBindings(appVM)