Calculation field in Editor Popup

Atif Nadeem

I have a editor which have a calculation field (LandedPOTotalLineValue) and it works on datatable but when user click on Edit button it is not working on the Editor Popup.

Please see below code and help me out.

$(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                "ajax": "/api/staff",
                "table": "#example",
                "fields": [{
                    "label": "PO No:",
                    "name": "PONo",
                    "disabled": true
                }, {
                    "label": "PO Line No:",
                    "name": "POLineNo"
                }, {
                    "label": "PO Date:",
                    "name": "PODate",
                    "type": "datetime"
                }, {
                    "label": "Vendor No:",
                    "name": "VendorNo"
                }, {
                    "label": "VendorName:",
                    "name": "VendorName"
                }, {
                    "label": "OrderQty:",
                    "name": "OrderQty",
                    "change": "tt"
                }, {
                    "label": "Price/Unit:",
                    "name": "NetPricePerUnit"
                }, {
                    "label": "Cost Factor:",
                    "name": "LandedCostFactor"
                }, {
                    "label": "Landed PO Total Line Value:",
                    "name": "LandedPOTotalLineValue"
                    /* I want to make this calculated field 
                     * like this 
                     * row.OrderQty * row.NetPricePerUnit * row.LandedCostFactor
                     */
                }
                ]
            });
            editor.field('LandedPOTotalLineValue').disable();

            $('#example').DataTable({
                dom: "Bfrtip",
                ajax: {
                    url: "/api/staff",
                    type: "POST"
                },
                serverSide: true,
                columns: [
                    { data: "PONo" },
                    { data: "POLineNo" },
                    { data: "PODate" },
                    { data: "VendorNo" },
                    { data: "VendorName" },
                    { data: "OrderQty" },
                    { data: "NetPricePerUnit" },
                    { data: "LandedCostFactor" },
                    {
                        data: null, 
                        render: function (data, type, row) {
                            return row.OrderQty * row.NetPricePerUnit * row.LandedCostFactor;
                        }
                    }
                ],
                select: true,
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });
        });

rf1234

If it is a calculated value it shouldn't be in the Editor form. Why? You shouldn't allow editing a calculated value directly.

What exactly "is not working"? Please provide more details on what you are trying to achieve and what the issue is.

Atif Nadeem

So basically I want "Landed PO Total Line Value" to be a formula field and it will be
Landed PO Total Line Value = OrderQty x Unit/Price x Cost Factor.
So I want to ask how can I call a function onchange on OrderQty, Unit, Cost Fact?

rf1234

Use “dependent“, just search for it and you'll find it in the docs. Also disable the calculated field to avoid user data entry.

allan

dependent() is indeed the method you will want to use here. With it you can write a function that will do the recalculation based on the input values and then set that as the value for your readonly field.

Allan

rf1234

The dependent thing would look like this.

editor
    .dependent('OrderQty', function (val, data, callback) {
        editor.set( {'LandedPOTotalLineValue': editor.val('OrderQty') * 
                                               editor.val('NetPricePerUnit') * 
                                               editor.val('LandedCostFactor') } );
    })
    .dependent('NetPricePerUnit', function (val, data, callback) {
        editor.set( {'LandedPOTotalLineValue': editor.val('OrderQty') * 
                                               editor.val('NetPricePerUnit') * 
                                               editor.val('LandedCostFactor') } );
    })
    .dependent('LandedCostFactor', function (val, data, callback) {
        editor.set( {'LandedPOTotalLineValue': editor.val('OrderQty') * 
                                               editor.val('NetPricePerUnit') * 
                                               editor.val('LandedCostFactor') } );
    })    

According to the docs this can be written shorter like this:

editor
    .dependent(['OrderQty', 'NetPricePerUnit', 'LandedCostFactor'], 
        function (val, data, callback) {
            editor.set( {'LandedPOTotalLineValue': editor.val('OrderQty') * 
                                                   editor.val('NetPricePerUnit') * 
                                                   editor.val('LandedCostFactor') } );
    })