Knockout CRUD table with inline editing

Question

I was trying to create a knockout crud table that creates a CRUD table from JSON data

I was successful with 'add' and 'delete' but how to handle 'total' and 'inline editing'

My view model

function AppViewModel() {
    var self = this;
    self.koData = ko.observableArray(initialData);
    self.addLine = function () {
        self.koData.push({
            name: "",
            sales: "",
            price: ""
        });
    };
    self.removeLine = function () {
        self.koData.remove(this);
    }
}

Code for inline editing

$('td').on('click', function () {
    var l_coresHead = $(this).closest('table').find('th').eq(this.cellIndex).text();
    var inputField = "<input type='text' data-bind='value: " + l_coresHead + "'/>";
    var text = $(this).text();
    $(this).text('');
    $(inputField).appendTo($(this)).val(text).select().blur(function () {
        /* How to update the object koData */
    });
});

I need a Total field that shows the sum of all price

Also I'm trying to do inline editing.

With help from hutchonoid I have done the summation part. Now I am trying to do the inline editing. Any help is welcome.

JSFiddle

Answer 1

Here is how to do your sum:

Add this to your last table row:

<td data-bind='text: total'>

Then this to calculate it:

    self.total = ko.computed(function() {
        var tot = 0;
    for (var i = 0; i < self.koData().length; i++)  {
               tot += self.koData()[i]["price"]
    }
    return tot;
});

jsFiddle here:

http://jsfiddle.net/879Pk/1/

Here is a good article on how to do the inline edit, too long to type into the answer:

http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html