KoGrid and observable properties

Question

I'm looking at using KoGrid and it took me a while to figure out how to use observable properties. I found the wiki page about custom templates helpful and that I have to use $parent.entity['editableField']. However, I can't get the css binding to work.

Please see my plunker or a copy below which is modified from their example. I can bet the name and age to change as an observable, but the first row, column 2 should be green (age > 30).

function stringCellTemplateVM() {
    var self = this;
    this.selectedItems = ko.observableArray([]);
    this.myData = ko.observableArray([{ name: ko.observable("Moroni"), age: ko.observable(50) },
                     { name: "Tiancum", age: 43 },
                     { name: "Jacob", age: 27 },
                     { name: "Nephi", age: 29 },
                     { name: "Enos", age: 34 }]);
    this.gridOptions = { 
        data: self.myData,
        selectedItems: self.selectedItems,
        multiSelect: false,
        columnDefs: [{field: 'name', displayName: 'Name'},
                    {field: 'age', displayName: 'Age', cellTemplate:'<div data-bind="attr: { \'class\': \'kgCellText colt\' + $index()},css: { green: $parent.entity[\'age\'] > 30 }, html: $parent.entity[\'age\']"></div>'}]
    };

    this.increaseAge = function(){
      this.myData()[0].age(this.myData()[0].age()+1);
      //alert(this.myData()[0].age());
      //this.myData()[0].name(this.myData()[0].name() + this.myData()[0].age());
    };
}
var vm = new stringCellTemplateVM();
ko.applyBindings(vm);

Is this the right way to work with observable properties?
How can I get the css binding to work to change that to green when that requirement is met?

Robbie · Accepted Answer · 2013-07-29T00:11:56.567

2

I think they method you are using is fine.

As for the css binding, try changing all the age properties to be observable and then change your css binding to this:

css: { green: $parent.entity[\'age\']() > 30 }

Notice I've added () to get the value from the observable.

Note that you can also use the style binding to achieve the same thing:

style: { backgroundColor: $parent.entity[\'age\']() > 30 ? \'green\' : \'\' }

This is slightly more long winded, but you don't need to use a separate css class.

EDIT:

Here is an example fiddle showing how you can use a computed observable to provide more complex logic

edited Jul 29 '13 at 00:11

answered Mar 14 '13 at 19:46

Robbie

18,750
4
41
45

The second option looks compelling, what if we want to have more colors say one for<20, >20<30 ,>30<40 , >40<50 and >50, and also i would like to put a small baby icon under 20, a school-boy for <30, and man-with a tie option for <40 and some odd icon for <50 and CEO for > 50., I.E Need a way to insert a tag into the script also. how can we do this for a col. depending on data. – bhushanvinay Jul 27 '13 at 17:55
If you wanted more complex logic then you could use a computed observable in the style binding. I've put together a fiddle here using your example of `<20, >20<30, >30<40, >40<50 and >50`: http://jsfiddle.net/rpallas/VsCrQ/ - For the icon, just use the same approach as this but on a separate image tag with a separate style binding and computed – Robbie Jul 29 '13 at 00:08

KoGrid and observable properties

1 Answers1