Make koGrid respect observable properties

Question

I've been writing an app with the kogrid, recently I changed my datasource from an array of objects to an array of knockout objects. However, to my surprise when I update the observable properties within my objects the grid is not updated.

Here is my data array:

self.gridData = ko.observableArray([
    { name: ko.observable("joe"), age: ko.observable(5) }
]);

when I update the age property nothing happens on the grid:

self.gridData()[0].age(6);

does anyone have a good answer for why this is?

Update

I've answered the question below , but does anyone know why the kogrid would be caching the unwrapped values?

Answer 1

I looked into the kogrid source and found this line in src/classes/row.js

self.getProperty = function (path) {
    return self.propertyCache[path] || (self.propertyCache[path] = window.kg.utils.evalProperty(self.entity, path));
};

it looks like the property cache is caching the unwrapped value of the property we're accessing in the default cell template :

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

(Note: $data in the template is the column, which has a getProperty wrapper for row.getProperty)

I simply removed the line to cache property values like this:

self.getProperty = function (path) {
    return window.kg.utils.evalProperty(self.entity, path);
};