Como simular un shuttle con 2 interactive GRID

En este caso lo que realizamos es simular el comportamiento de un shuttle mediante Grids.

La idea es seleccionar elementos de un lado del Grid y enviarlos al otro Grid, en ambas direcciones.

Para realizar esta tarea es necesario identificar cada Grid con un Static ID.

Vamos a nominarlos como: igLeft e igRight.

Utilizaremos el siguiente código para realizar el pasaje

Con la siguiente idea

Se seleccionan las vistas actuales de cada Grid.

Vamos a para cada registro seleccionado en una de las grillas crear un nuevo registro en el otro Grid y asignarles los valores del primer Grid.

Luego debemos eliminar el registro original  y por último ejecutar el comando SAVE de cada uno de los Grids.

function moveRight(){

     var i, records, record, sal, modelLeft,

        viewLeft = apex.region("igLeft").widget().interactiveGrid("getCurrentView");

     modelLeft = viewLeft.model;

var modelRight       = apex.region('igRight').widget().interactiveGrid('getViews','grid').model;

var myNewRecordId,myNewRecord;

    var recordId;

//insert new record on a model

    // leer los seleccionados del lado izquierdo

       records = viewLeft.getSelectedRecords();

   // para cada uno crear registro  en grilla derecha, copiar valores y eliminar

        if ( records.length > 0 ) {

            for ( i = 0; i < records.length; i++ ) {

                record = records[i];

      

            myNewRecordId = modelRight.insertNewRecord();

//get the new record

  myNewRecord = modelRight.getRecord(myNewRecordId);

//update record values

modelRight.setValue(myNewRecord, 'COLUMN1', modelLeft.getValue(record, "COLUMN1"));

modelRight.setValue(myNewRecord, 'COLUMN2', modelLeft.getValue(record, "COLUMN2"));

modelRight.setValue(myNewRecord, 'COLUMN3', modelLeft.getValue(record, "COLUMN3"));

modelRight.setValue(myNewRecord, 'COLUMN4', modelLeft.getValue(record, "COLUMN4"));

modelRight.setValue(myNewRecord, 'CLASIFICA', 'I'); 

           

            }

              modelLeft.deleteRecords(records); 

//

            apex.region("igLeft").widget().interactiveGrid("getActions").invoke("save");

            apex.region("igRight").widget().interactiveGrid("getActions").invoke("save");

        }

}

CheckBox en un GRID de APEX

Desarrollando para un cliente, nos encontramos con la necesidad de utilizar un checkbox en el GRID (editable). Utiizando el rowselect de  APEX no cumplia los requisitos que quería el cliente, y utilizando un checkbox como una columna el look and feel no es el mejor y realmente tampoco era lo que deseaba nuestro cliente.
En resumen lo que hicimos fue customizar un checkbox utilizando imagenes de checked y uncheked

A continuación veremos la implementación:

La idea es que se utiliza un link que devuelve la línea donde se da click, en caso que el Grid no esté habilitado para modificarse, lo habilita y vuelve a llamarse con los mismos parámetros. En este segundo llamado sí va a estar habilitado. Si la clase del checkbox es desmarcado la cambia a marcado y viceversa. Cuando la clase queda marcada asigna a la columna marca un 1 sino 0 (0 es el valor por defecto).

El uso de la columna marca es si queremos procesar solo aquellas columnas que fueron realmente marcadas

        En el select se debe escribir:  ROWNUM as chkbox  y 0 as MARCA. 

   

      El rownum en caso que nuestro query  este compuesto por varias uniones debe estar en el select por fuera de todo el query.

2       Para configurar el  CHKBOX debemos setearlo del tipo LINK.

o   type : URL

o   URL: javascript:payUnpayCB("miStaticGridId",&CHKBOX.)  (En el primer parámetro va el static id del Grid, en el segundo parámetro ver que luego del & va el nombre del item que hace de checkbox)

o   Link Text: <span id="checkBoxID_&CHKBOX." aria-hidden="true" class="fa fa-square-o"></span>

o   Link Attributes: id="clickCheck_&CHKBOX."

     3)      Column Filter: False

     4)      Enable Users to: Sort: False

     5)      En CHKBOX en js Initialization Code

function(options) { 

 options.defaultGridColumnOptions = { 

    noHeaderActivate: true 

  } 

  return options; 

} 

    6)      A nivel de página en Function and Global Variable Declaration

            function payUnpayCB(pIDGrid, pLine) {

   

    if((apex.region(pIDGrid).widget().interactiveGrid("getActions").get("edit"))){

        var view = apex.region(pIDGrid).widget().interactiveGrid("getCurrentView");

        var model = view.model;

        var record = view.view$.grid("getActiveRecord");

   

        var aRet = $("#checkBoxID_"+pLine).attr("class");

        if (aRet == "fa fa-square-o" ){

           model.setValue( record, "MARCA", "1");

           $("#checkBoxID_"+pLine).removeClass("fa fa-square-o").addClass("fa fa-check-square-o");

        }

        else {

              model.setValue( record, "MARCA", "0");

              $("#checkBoxID_"+pLine).removeClass("fa fa-check-square-o").addClass("fa fa-square-o");

        }

       

    }

    else {

          apex.region(pIDGrid).widget().interactiveGrid("getActions").set("edit", true);

          payUnpayCB(pIDGrid, pLine);

    }

}

    7)   El item MARCA lo ocultamos en tiempo de ejecución y salvamos el reporte por defecto