Jsgrid: Update on column when another is populated

[andyjhall]

Hi,

If I have 2 columns (Cost and FinalCost) is it possible to automatically the FinalCost column when i tab away from the Cost column? As an example FinalCost would be Cost+10%. I need this to happen both on insert and onUpdate however cant find a method which would allow this.

Thanks,

Andy.

[tabalinas]

As I understand, all you need is to define two grid fields (columns) both depending on a single item data field.

Something like the following:

    fields: [{ 
        name: "cost",
        type: "text",
        align: "right" 
    }, { 
        name: "cost",
        editing: false,
        inserting: false,
        align: "right",
        itemTemplate: function(cost) {
            return (cost * 1.1).toFixed(2);
        }
    }

Here the second field is a readonly field, just showing calculation result with itemTemplate. Only the first field is editable.

Here is working fiddle http://jsfiddle.net/tabalinas/qsgttb34/

[andyjhall]

Thats brilliant thanks! Dont suppose there is anyway this could be done inline so that the calculated value can be overwritten?

[tabalinas]

Thus, user can edit either cost or full_cost, and the other field should be recalculated? Is this what you try to achieve?

[andyjhall]

What im hoping for is to type in the cost, have the full cost calculated but then be able to go into full cost and edit the value so if cost was 100 and final cost was calcualted as 110 i could still edit the final cost to be 150 or even 100 for this specific line. Make sense? Thanks.

[tabalinas]

Ok, for this case both fields should be editable. Just change fullcost value on changing cost value.

This could be done with editTemplate (for updating, and insertTemplate for the inserting)

        editTemplate: function(value) {
            var grid = this._grid;

            var $textBox = $("<input>").val(value);
            $textBox.on("change", function() {
                var fullCost = parseInt($textBox.val()) * 1.1;
                grid.option("fields")[1].editControl.val(fullCost.toFixed(2));
            });

            var $result = this.editControl = $textBox;
            $result.val(value);
            return $result;
        }

See example: http://jsfiddle.net/tabalinas/qsgttb34/3/

[andyjhall]

Thats exactly what I was looking for, Thanks very much

[tabalinas]

You are welcome!

[masall]

Sorry for the intrusion.
I was wondering if you can pre-validate.
Thus:
If in a field A (select) 1 was selected
Would field B be visible, otherwise, not (invisible)?

It's possible?

Thank you.