2

I'd like to have a simple jqxGrid with computed column. Looks like everything is ok, but it doesn't work. Simple example:

<script type="text/javascript">
$(document).ready(function () {
    var vm = {
        date: ko.observable(new Date()),
        items: ko.observableArray(),
        load: function () {
            for (var i = 0; i < 10; i++) {
                var item = {
                    x: ko.observable(i),
                    y: ko.observable(i + 1)
                };
                item.sum = ko.computed(function() { return this.x() + this.y(); }, item);
                this.items.push(item);
            }
        }
    };
    ko.applyBindings(vm);
});
</script>

<input data-bind="click: load, jqxButton: {theme: 'metro'}" type="button" value="Load" />
<div data-bind="jqxGrid: {source: items, disabled: false, autoheight: true,
                editable: true,
                selectionmode: 'singlecell',
                theme: 'metro',
                columns: [
                { text: 'X', dataField: 'x' },
                { text: 'Y', dataField: 'y' },
                { text: 'Sum', dataField: 'sum'}
                ]}" id="jqxgrid">
</div>
<table style="margin-top: 20px;">
<tbody data-bind="foreach: items">
    <tr>
        <td data-bind="text: x"></td>
        <td data-bind="text: y"></td>
        <td data-bind="text: sum"></td>
    </tr>
</tbody>
</table>

That is going on: I'm able to update x or y and I see new values in the table below, but Sum field never updates after the first load.

Yan Oreshchenkov
  • 223
  • 2
  • 8
  • Can you post the source code for the jqxGrid knockout binding? I see you're using a custom knockout binding there, and it is probably responsible for hooking up the subscriptions. The problem is likely in that code. – Judah Gabriel Himango Dec 03 '12 at 19:59

1 Answers1

0

Your .sum property is a computed value, but jqxgrid has no idea about computes or other observable values. Therefore, it has no idea that it needs to update.

You could trigger an update yourself by subscribing to the computed and calling .updatebounddata on the grid:

vm.sum.subscribe(function() {
    $('#idOfYourGridHere').trigger( 'updatebounddata' );
}

I see you're using a custom knockout binding called jqxgrid. If you like, you could probably modify that binding so that it updates properly.

Judah Gabriel Himango
  • 58,906
  • 38
  • 158
  • 212
  • Yep, it looks like a solution but unfortunately jqx binding works quite slow to use it every time when something changed. I can't leave the idea that something wrong inside jqx grid. Take a look at the example. If you change binding of the bottom table to bind values inside , you will be able to edit them easy. And if you change X or Y, the Sum will be automatically calculated and updated in the table and in the grid (!). Why it doesn't work when I edit the same value in the grid is a miracle. Grid update it in the view-model, but do it some wrong way which doesn't recalc sum – Yan Oreshchenkov Dec 12 '12 at 14:30
  • @YanOreshchenkov Please post the code for the jqxGrid knockout binding handler. – Judah Gabriel Himango Dec 12 '12 at 16:03