Rejilla de datos - Arrastrar y soltar objetos

La nueva rejilla de datos de 4D Ajax Framework v11.1 tiene capacidad arrastrar y soltar integrada. Este ejemplo muestra cómo activar arrastrar y soltar entre dos objetos de rejilla de datos. Muestra 3 formas diferentes de arrastrar y soltar.

Activar Opción arrastrable

Para activar la opción arrastrable en una rejilla de datos, el comando setDragCells debe ejecutarse en el objeto rejilla. Este comando también debe ejecutarse después la construcción del objeto rejilla (dragGrid.go();)

    Sintaxis: dragGrid.setDragCells(row, column, isDroppable);

Activar Opción soltable

Para la activación de la opción soltable en una rejilla de datos, el evento "ondragrelease" debe activarse para el objeto rejilla. Este evento permite al desarrollador determinar la respuesta específica cuando un objeto se suelta en una celda. Para activar este evento, se debe definir una función javascript para el evento.
    Sintaxis: dropGrid.ondragrelease = YourFunction;

En este ejemplo, definimos el nombre de la función que responderá al evento ondragrelease como "onDragReleaseEvent". Acá está la llamada que se realiza en el ejemplo:

    dropGrid.ondragrelease = onDragReleaseEvent;

La función que responderá a ondragrelease y que recibirá 2 parámetros de entrada. En este ejemplo, la función llamada onDragReleaseEvent se ve así:

    function onDragReleaseEvent(cellRef, event) {
        // Hacer algo aquí
    }

Para ofrecer un indicador visual de que una celda está siendo arrastrada, el evento "ondragover" se activa para el objeto rejilla. Este evento permite al desarrollador determinar una respuesta específica cuando un objeto se arrastra sobre una celda. Para activar este evento, debe definirse una función javascript para el evento.

    Sintaxis: dropGrid.ondragover = YourFunction;

En este ejemplo, definimos el nombre de la función que responderá al evento ondragrelease como "onDragOverEvent". Está es la llamada que se realiza en el ejemplo:

    dropGrid.ondragover = onDragOverEvent;

Al igual que el evento ondragrelease, la función que responderá a ondragrelease y recibirá 2 parámetros de entrada. En este ejemplo, la función llamada onDragOverEvent se ve de esta forma:

    function onDragOverEvent(cellRef, event) {
        // Hacer algo acá
    }

En todo el ejemplo el evento ondragover se utiliza para cambiar temporalmente el color del fondo de la celda arrastrada. Se hace fácilmente devolviendo el nombre de un estilo css como resultado.

    function onDragOverEvent(cellRef, event) {
        return 'dragdrop_style';
    }

Ejemplos

Ejemplo 1: Arrastrar y soltar simple
Cuando ondragrelease dispara la función onDragReleaseEvent, llama a otra función llamada doexample1 con su referencia de celda soltada pasa el parámetro.

    function doexample1(cellRef){
        var originCell = dax_bridge.hoverDragging.dragObjectSource;
        var srcvalue = originCell.value;
        dropGrid.setCellValue(cellRef.row, cellRef.column, srcvalue);
    }

Una vez soltada la celda, simplemente recuperamos el valor de la celda arrastrada y asignamos el valor de la celda soltada con el comando setCellValue.

Ejemplo 2: Arrastrar y soltar como lista (permitir inserción)
Cuando ondragrelease dispara la función onDragReleaseEvent, llama a otra función llamada doexample2 con su referencia de celda soltada pasa el parámetro.

    function doexample2(cellRef){
        var originCell = dax_bridge.hoverDragging.dragObjectSource;
        var srcvalue = originCell.value;
        if(cellRef.row < dropcount){
            var relocatevalue = '';
            for(var i=dropcount; i>=cellRef.row; i--){
                relocatevalue = dropGrid.getCellValue(i, cellRef.column);
                dropGrid.setCellValue(i+1, cellRef.column, relocatevalue);
            }
            dropGrid.setCellValue(cellRef.row, cellRef.column, srcvalue);
        }else{
            dropGrid.setCellValue(dropcount, cellRef.column, srcvalue);
        }
    }

Por cada evento soltado, una variable dropcount se incrementa en 1. Se utiliza para mantener un registro del número total de elementos soltados. Cuando una posición soltada es menor o igual a dropcount, los valores en la fila soltada o debajo se aumentarán en uno. El valor de la posición soltada luego se insertará con el valor de la celda arrastrada.

Ejemplo 3: Arrastrar y soltar como lista (efecto cortar y pegar)
Cuando ondragrelease dispara la función onDragReleaseEvent, llama a otra función llamada doexample3 con su referencia de celda soltada para el parámetro.

    function doexample3(cellRef){
        var originCell = dax_bridge.hoverDragging.dragObjectSource;
        var srcvalue = originCell.value;
        if(cellRef.row < dropcount){
            var relocatevalue = '';
            for(var i=dropcount; i>=cellRef.row; i--){
                relocatevalue = dropGrid.getCellValue(i, cellRef.column);
                dropGrid.setCellValue(i+1, cellRef.column, relocatevalue);
            }
            dropGrid.setCellValue(cellRef.row, cellRef.column, srcvalue);
        }else{
            dropGrid.setCellValue(dropcount, cellRef.column, srcvalue);
        }
        // Eliminar el elemento soltar de la lista original
        var rownum = dragGrid.getParsedDataRecordCount();
        for(var i=originCell.row; i<=rownum; i++){
            relocatevalue = dragGrid.getCellValue(i+1, originCell.column);
            dragGrid.setCellValue(i, originCell.column, relocatevalue);
        }
    }

Este ejemplo es igual al ejemplo 2 con la excepción de que la celda que ha sido arrastrada se elimina automáticamente de la rejilla.