"Total Qty" placement under detail table

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
montserat03
User
Posts: 32

"Total Qty" placement under detail table

Post by montserat03 »

Dear all,

I have header detail entry/edit form with QTY field on its detail.. and TOTAL_QTY on the header...
ex:
Order # ABC
Date # 1/1/2018

Item              Qty
Broom             1
Chalk              5
 
Total  Qty        6

is there a way to place this textbox total_qty BELOW the QTY field on the detail... ?
I don't know how to do it. so I place the total_qty on the top of the DETAIL TABLE..
something like this

 Order #  ABC
 Date  #  1/1/2018
Total Qty        6

Item              Qty
Broom             1
Chalk              5

can someone help..? thank u so much


kirondedshem
User
Posts: 642

Post by kirondedshem »

  1. getting the total quantity value evry time QTy changes
    5.Attach scripts to auto re calculate the total_qty for every row when qty has changed, got to field settings of qty in client side events and put
    { // keys = event types, values = handler functions
    "keyup": function(e) {
    //recalculate net amount
    CalculateTotalQty();
    }
    }

NOTE: notice the function "CalculateNet()" it is the one responsible for recalculating the total qty so we call it after we are sure qty in a given row has changed

  1. put the CalculateTotalQty() function in client scripts of the DETAIL table(onw with item,qty) in client scripts->table specific->add section and client scripts->table specific->edit section so that its available to be called. SO paste the function as below
    NOTE: if you inspect your a qty input field you'll see is has certain properties id="x[n]_qty" where n is the row number, class="form-control" and data-field="x_qty", so we just have to look for these controlls and get thier values and sum them up

function CalculateTotalQty(){
var total_qty = 0;
var all_qtys = $('[data-field="x_qty"]');
for(var i = 0;i < all_qtys.length;i++){
var the_qty = 0;
//ensure that its the input controll of interest
if(all_qtys[i].className == "form-control"){
the_qty = all_qtys[i].value;
if(!(the_qty > 0)){the_qty = 0;}
total_qty += parseFloat(the_qty);
}
}
//show the total_qty anywhere for now am putting in console log
console.log(total_qty);
//assign value to a field on the form
//document.getElementById('x_total_quantity').value = total_qty;
}

if you've done it correctly you should see the total_qty in console log change every time you change the qty on any row. now you just have to draw a row below to show it or assign it into the total Qty field something.
So if it working, you can then assign it to the total quantity field in the master table.

  1. drawing a row below the last row.
    If you inspect the div on the last row(one with a grid add button) it has class="box-footer ewGridLowerPanel", you can get it using jquery, then you can use an append to put anything there, for example can call something like
    $('.box-footer.ewGridLowerPanel').append('something');

montserat03
User
Posts: 32

Post by montserat03 »

thank u so much for the information


montserat03
User
Posts: 32

Post by montserat03 »

Is it also possible to add user entry in the lower GRID $('.box-footer.ewGridLowerPanel')..

because sometimes in the transaction form we need to add something like discount then NETT..
in grid something LIKE

   DATA 1       50
   DATA 2       40
   DATA 3       10
   total          100        ( calculated )
    disc            10        ( user entry part of header field )
   Nett             90        ( calculated )

I can do this.. but right now the TOTAL, DISC, and NETT is above the GRID.....
I am thinking if there is a way to put it down.. under the DETAIL grid..

Thank u so much


kirondedshem
User
Posts: 642

Post by kirondedshem »

You can move content using jquery after teh form loads,
If you inspect the form and find ids and classes you can you to identify content to be moved as well as ids and classes of the destination
for example after the master form and detail form have rendered, you can move the master form to go bellow the detail table like this:
Put code in stratup script of master add / edit page:
//my master table is called "bus_repair"
// format is $(sourcecontent).appendTo(destination);
$('#tpd_bus_repairadd').appendTo('[class="box ewBox ewGrid ewGridAddEdit bus_repair_fault"]');

Using this method: since the three fields are on the master form, you can find thier divs and move them below the dteail table like you wanted


Post Reply