Step:1
=====
=====
Select "Amount" Column in Grid Region.
Create Dynamic Action:
Event: Key Release
Action: Execute Javascript Code :
Create Dynamic Action:
Event: Key Release
Action: Execute Javascript Code :
Code:
function getdefectqty() {
// 1. Save cursor position
let activeInput = document.activeElement;
let cursorPos = 0;
if (activeInput && activeInput.selectionStart !== undefined) {
cursorPos = activeInput.selectionStart;
}
let sumWrongInfo = 0;
let sumv_qty = 0;
let ig$ = apex.region("PRODUCT_GRID").widget();
let grid = ig$.interactiveGrid("getViews", "grid");
// 2. commit change (this causes jump)
grid.view$.grid("finishEditing");
let model = grid.model;
model.forEach(function (r) {
let meta = model.getRecordMetadata(model.getRecordId(r));
if (!meta.agg) {
let wrongInfo = model.getValue(r, "UNIT_PRICE") || 0;
sumWrongInfo += Number(wrongInfo);
let v_qty = model.getValue(r, "QUANTITY") || 0;
sumv_qty += Number(v_qty);
}
});
$s("P12801_TOTAL_AMOUNT", sumWrongInfo);
$s("P12801_QTY", sumv_qty);
// 3. Restore cursor position (IMPORTANT)
setTimeout(function () {
if (activeInput && activeInput.setSelectionRange) {
activeInput.focus();
activeInput.setSelectionRange(cursorPos, cursorPos);
}
}, 0);
}
getdefectqty();
Step:2
=====
=====
Select Grid Region.
STATIC id: PRODUCT_GRID
Step:3
=====
=====
If you want to card design, then apply Inline CSS.
/* ---------Total Card design-------------------*/
/* Common Card Style */
#P12801_TOTAL_AMOUNT_CONTAINER,
#P12801_QTY_CONTAINER {
background: rgb(255, 230, 230);
border-radius: 12px;
padding: 12px 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
transition: 0.3s;
}
/* Hover effect */
#P12801_TOTAL_AMOUNT_CONTAINER:hover,
#P12801_QTY_CONTAINER:hover {
transform: translateY(-2px);
}
/* Input remove default look */
#P12801_TOTAL_AMOUNT,
#P12801_QTY {
font-size: 20px;
font-weight: bold;
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0;
}
/* Amount color */
#P12801_TOTAL_AMOUNT {
color: #2E7D32;
}
/* Qty color */
#P12801_QTY {
color: #1565C0;
}
/* Label style */
#P12801_TOTAL_AMOUNT_CONTAINER .t-Form-label,
#P12801_QTY_CONTAINER .t-Form-label {
font-size: 12px;
color: #888;
margin-bottom: 5px;
}
#P12801_TOTAL_AMOUNT_CONTAINER::before {
content: "💰";
font-size: 28px; /* size increase */
margin-right: 8px;
color: #2E7D32;
}
#P12801_QTY_CONTAINER::before {
content: "⚡";
font-size: 28px; /* size increase */
margin-right: 8px;
color: #1565C0;
}
#P12801_TOTAL_AMOUNT_CONTAINER,
#P12801_QTY_CONTAINER {
display: flex;
justify-content: space-between;
align-items: center;
}
Tags:
Oracle Apex