Data Grid - Drag and Drop Objects

The new DataGrid in 4D Ajax Framework v11 Release 1 has drag and drop capability bullt in. This example demonstrates how to enable drag and drop between 2 DataGrid object. It shows 3 different ways of how drag and drop can be handled.

Enable Draggable Option

Enabling draggable option on a data grid, the command setDragCells must be executed on the grid object. This command must also be executed after the grid object is constructed (dragGrid.go();)

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

Enable Droppable Option

Enabling droppable option on a data grid, the event "ondragrelease" must be activated for the grid object. This event allows the developer to determine specific response when an object is dropped onto a cell. To activate this event, a javascript function must be set to the event.

    Syntax: dropGrid.ondragrelease = YourFunction;

In this example, we defined the name of the function that will respond to the ondragrelease event as "onDragReleaseEvent". Here is the call that is made in the example:

    dropGrid.ondragrelease = onDragReleaseEvent;

The function that will respond to the ondragrelease and will receive 2 input parameters. In this example, the function named onDragReleaseEvent looks like this:

    function onDragReleaseEvent(cellRef, event) {
        // Do something here
    }

In order to provide a visual indicator of cell being dragged over, the event "ondragover" is activated for the grid object. This event allows the developer to determine specific response when an object is dragged over a cell. To activate this event, a javascript function must be set to the event.

    Syntax: dropGrid.ondragover = YourFunction;

In this example, we defined the name of the function that will respond to the ondragrelease event as "onDragOverEvent". Here is the call that is made in the example:

    dropGrid.ondragover = onDragOverEvent;

Same as the ondragrelease event, the function that will respond to the ondragrelease and will receive 2 input parameters. In this example, the function named onDragOverEvent looks like this:

    function onDragOverEvent(cellRef, event) {
        // Do something here
    }

For all example the event ondragover is used to temporarily change the background color of dragged over cell. It is easily done by returned the name of a css style as the result.

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

Examples

Example 1: Simple Drag and Drop
When ondragrelease triggers function onDragReleaseEvent, it calls another function named doexample1 with its dropped cell reference pass the parameter.

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

Once a cell is dropped, we simply retrieve that value of the dragged cell and assign to the drop cell value with the command setCellValue.

Example 2: Drag and Drop as list (allows insertion)
When ondragrelease triggers function onDragReleaseEvent, it calls another function named doexample2 with its dropped cell reference pass the parameter.

    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);
        }
    }

For every dropped event, a variable dropcount is incremented by 1. It is used to keep track of the total number of the dropped items. When a dropped position is less than or equal to dropcount, the values at the dropped row or below will be shift down by one. The value of the dropped position will then be inserted with the value from the dragged cell.

Example 3: Drag and Drop as list (cut and paste effect)
When ondragrelease triggers function onDragReleaseEvent, it calls another function named doexample3 with its dropped cell reference pass the parameter.

    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);
        }
        // Remove drop item from the original list
        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);
        }
    }

This example is the same as example 2 with the exception that will cell that has been dragged over is automatically removed from the grid.