Capturar onChange/cell edit en Interactive Grid y asignar valor en celda

El siguiente blog surge en la necesidad de un compañero que me relato el siguiente problema. Se tiene un Interactive Grid, donde se muestran proyectos, aquí están padres e hijos, se muestra una columna llamada BUDGET, esto significa que varias líneas en este grid tienen en común un proyecto padre, que también se visualiza en el grid, la diferente es que los proyectos padre no tienen un ID de proyecto padre, con eso se desea que cada vez que se edite el valor de BUDGET en una celda hija, este sume el valor(budget) de todas las celdas hijas de un proyecto y asignarlo la celda (budget) del proyecto padre.

En este ejemplo detallaremos los siguientes puntos, usando Interactive Grids:

• Como capturar el onChange o cambio de valor en una celda.
• Obtener la celda donde se ejecutó el cambio, así como el valor antiguo y nuevo.
• Calcular en base a la celda seleccionada valores de otras columnas.
• Asignación de valores a una fila y columna especifica.

Todo el requerimientos y acciones de logro en un bloque de dos funciones JavaScript, en donde usamos el modelo, un listener para escuchar los eventos de cambio de valor y así mismo un loop para recorrer las filas , sumar y asignar a la celda correspondiente.

La demo de este ejemplo lo pueden visualizar en… DEMO

Primero creamos un InteractiveGrid y le asignamos un ID en mi caso employeesIG.

Lo siguiente será agregar el siguiente código JavaScript en la sección de la página, Function and Global Variable Declaration

var igGrid$ = $("#employeesIG");
igGrid$.on("interactivegridviewmodelcreate", function(event, ui) {

  var grid = apex.region("employeesIG").widget().interactiveGrid("getViews", "grid");
  var model = grid.model;

  //var model = ui.model; // we can also use this definnnnnn
  var model = model;
  //  console.log('ui',ui);

    if (ui.viewId === "grid") {

        sid = model.subscribe( {

          onChange: function(type, change) {

            if (type === 'set' &&  (change.field == 'BUDGET' ) ) {

                var record = model.getRecord(change.recordId), // Usar change.recordId
                    fieldName = change.field,
                    newValue = model.getValue(record, fieldName);
                    parentProjectId = model.getValue(record, 'PARENT_PROJECT_ID');
                    console.log('change',change);

                    lastRecord = record;
                //console.log('Celda cambiada en la columna:', fieldName,'oldValue', change.oldValue, 'Nuevo Valor:', newValue);
                if(parentProjectId){
                  // the timeout important, this is a bug but not document 100%
                  setTimeout(function() {
                    calculateTotals(model,parentProjectId);
                  },1);
                }
            }
            // console.log(15, ui.viewId, type, change, event,ui);
          }

        });

    }

});


function calculateTotals(model, selectedParentId){

  let sumParentProject = 0;

  model.forEach(function(fetchRecord, index, idx) {


    // save the parent ID of the curren fetchRow
    let parentProjectId = model.getValue(fetchRecord,'PARENT_PROJECT_ID');
    // define the ID for get he parent id later
    let fetchSelectedID= model.getValue(fetchRecord,'ID');

    // sum all the records with the same parent ID
    if (selectedParentId == parentProjectId ){
      // get the current budget
      let budget = model.getValue(fetchRecord, 'BUDGET' );
      sumParentProject = Number(sumParentProject) + Number(budget);
    }

    // reuse the loop for search the parent record
    if (fetchSelectedID == selectedParentId) {
      parentRecord = fetchRecord;
    }
  });

  // cast to String to apply the changes on the view
  model.setValue(parentRecord, 'BUDGET' , sumParentProject.toString() );

  //console.log('this is the parent record', parentRecord);
  //console.log('the total for projectId(' + parentId + ') is', sumParentProject);

}

Y como resultado vemos que al cambiar el valor de la celda, este se replica en la celda padre.