KoGrid update cell

Question

I am trying to update a single cell with KoGrid, but I don't see the update happen until I sort the grid by clicking on the column header.

The following is the code I'm using. JSFiddle available here: http://jsfiddle.net/b22Ex/2/

The line that's not working is: vm.data()[0].b(100). Shouldn't that work since the value is a ko.observable?


    var L = [
        {a:ko.observable('a1'), b:ko.observable('b1'), c:ko.observable('c1')},
        {a:ko.observable('a2'), b:ko.observable('b2'), c:ko.observable('c2')},
        {a:ko.observable('a3'), b:ko.observable('b3'), c:ko.observable('c3')}
    ];
    var vm = {
        data: ko.observableArray(L)
    };
    window.vm = vm;
    ko.applyBindings(vm);
    vm.data()[0].b(100)
    console.log("DONE CHANGING VALUE");

By the way, I also came across KoGrid how to refresh grid in case data is changed but I don't want to update the entire dataset.

Have you tried making the update be a function from a button? — segFault, Apr 04 '13 at 03:13

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

Updated

Try this :

Working Fiddle

JS

var xxx = [
    {a:ko.observable('a1'), b:ko.observable('b1'), c:ko.observable('c1')},
    {a:ko.observable('a2'), b:ko.observable('b2'), c:ko.observable('c2')},
    {a:ko.observable('a3'), b:ko.observable('b3'), c:ko.observable('c3')}
];

var vm = {
    data: ko.observableArray(xxx),
};

window.vm = vm;
ko.applyBindings(vm);

 vm.data()[0].b(100);
 vm.data.valueHasMutated();  //This will update your observable in UI


console.log("DONE CHANGING VALUE");

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 04 '13 at 03:13

Gaurav

8,367
14
55
90

Thanks, I just tried this and it works. Is there a particular reason I have to call valueHasMutated()? – krasnaya Apr 04 '13 at 14:29

score 1 · Answer 2 · answered Apr 04 '13 at 04:09

Below is the solution to your problem. Check this Fiddle.

var xxx = [
 {a:ko.observable('a1'), b:ko.observable('b1'), c:ko.observable('c1')},
 {a:ko.observable('a2'), b:ko.observable('b2'), c:ko.observable('c2')},
 {a:ko.observable('a3'), b:ko.observable('b3'), c:ko.observable('c3')}
];
var vm = {
 data: ko.observableArray(xxx)
};
window.vm = vm;
ko.applyBindings(vm);
vm.data()[0].b(100)

vm.data(vm.data()); //This line will make the fix that you need.

console.log("DONE CHANGING VALUE");

Instead of reinitialize the observableArray, you can use `valueHasMutated` property which will automatically propagate the changes to UI, check my updated answer — Gaurav, Apr 04 '13 at 04:25

KoGrid update cell

2 Answers2

Linked