RadiantQ jQuery Gantt Package
How to show a Drag cue on a specific column?
Previous Topic  Next Topic 


Now, the rows can be dragged and dropped on parent using the drag cue on the right side of the any column.


Code Usage:


var columns = [

    {

        field: "Name",

        title: "Name",

        width: 100,

        locked: true,

        cellClass:'rq-grid-column-rdnd',

        editor: RadiantQ.Default.Template.FlexyGanttExpandableTextBoxEditor("nameConverter"),

        template: RadiantQ.Default.Template.FlexyGanttExpandableTextBlockTemplate("nameConverter")

    }

];



$(document).ready(function () {


    var fxgantt = $gantt_container.data('FlexyGantt');


    fxgantt.SelectedRowsDrag.subscribe(function (args) {

        $("#gantt_container").on("selectstart", function (e) { e.preventDefault(); });

        var dragOverRowIndex = args.DragOverRowIndex;

        if (dragOverRowIndex == -1) {

            args.Cancel = true;

            return;

        }

    });


    fxgantt.SelectedRowsDrop.subscribe(function (args) {

        // This will be the case when Teams are dragged.

        if (CanDragSelectedRows() == false) {

            alert("Only Employees can be dragged");

            args.Cancel = true;

            return;

        }

            // This will be the case when the user chooses to drop next to a node rather than within a node.

        else if (args.DropAsChildren == false) {

            args.Cancel = true;

            alert("Can only be dropped as children.");

        }

            // User chose to drop within a node

        else {

            var dropRowData = fxgantt.FlatHierarchicalItemsList[args.DestinationIndex];

                   

            if (dropRowData._parentItem == null || dropRowData._parentItem == undefined) {

                // Save the selected rows, before deleting them from the UI:

                var selectedRows = fxgantt.SelectedItems.slice(0);


                var index = GetRowIndex(dropRowData.corrFlexyNodeData);

                var dropTeam = GetTeam(index);


                // Move all the selected employees into the destination team.

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

                    var empIndex = GetRowIndex(selectedRows[i]);

                    var employee = selectedRows[i].Data();

                    var currentTeam = GetTeam(empIndex);

                    if (currentTeam != dropTeam) {

                        // Delete from old Team

                        $.observable(currentTeam.Resources).remove(employee);

                        // Add to new Team

                        $.observable(dropTeam.Resources).insert(employee);

                    }

                }

            }

            else {

                alert("Can only be dropped on Teams");

                args.Cancel = true;

            }

        }

    });

    var GetRowIndex = function (rowData) {

        if (fxgantt.options.UseVirtualization)

            // return rowData.TableRow()[0]._displayIndex;

            return rowData._displayIndex;

        else

            return rowData._displayIndex;

    }


    var GetTeam = function (employeeIndex) {

        // Parse back up the table rows and find the employee's team.

        var flexyItem = fxgantt.FlatHierarchicalItemsList[employeeIndex];

        if (flexyItem._parentItem != null && flexyItem._parentItem != undefined)

            return flexyItem._parentItem.data;

        else

            return flexyItem.data;


        throw new Exception("This shouldn't happen.");

    }

    var CanDragSelectedRows = function () {

        var selectedItems = fxgantt.SelectedItems;

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

            // Can only drag employees

            if (selectedItems[i].IsParentType())

                return false;

        }

        return true;

    }

});






© RadiantQ 2022. All Rights Reserved.