Wijmo 5 [Flex Grid]

Drag and Drop rows from cell content and

by Manish Gupta

HTML

<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.188/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl as form">

        <h1>Dragging rows from the grid</h1>

        <p>Drag rows from the grid by data cells:</p>
        <wj-flex-grid items-source="form.data" allow-dragging="Columns" initialized="form.makeDraggable(s,e)">
        </wj-flex-grid>
    </div>

JavaScript

var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope) {
            var form = this;
            this.makeDraggable = function (s, e) {
                s.itemFormatter = function (panel, r, c, cell) {
                    if (panel.cellType == wijmo.grid.CellType.Cell) {
                        cell.draggable = true;
                        cell.droppable = true;
                    }
                };
                s.hostElement.addEventListener('mousedown', function (e) {
                    if (s.hitTest(e).cellType == wijmo.grid.CellType.Cell) {
                        e.stopPropagation();
                    };
                }, true);
                var dragRow = null;
                var dragColumn = null;
                var dropRow = null;
                s.hostElement.addEventListener('dragstart', function (e) {
                    dragRow = null;
                    var ht = s.hitTest(e);
                    if (ht.cellType == wijmo.grid.CellType.Cell) {
                        dragRow = ht.row;
                        e.dataTransfer.effectAllowed = 'copy';
                        e.dataTransfer.setData('text', '');
                    };
                });
                s.hostElement.addEventListener('dragover', function (e) {
                    if (dragRow != null) {
                        var ht = s.hitTest(e);
                        if (ht.cellType == wijmo.grid.CellType.Cell) {
                            dropRow = ht.row; //console.log(dropRow);
                        }
                        e.dataTransfer.dropEffect = 'copy';
                        e.preventDefault();
                    }
                });
                // Array  to contain sorted rows detail
                var sortedRowList = [];              
                
                s.hostElement.addEventListener('drop', function (e) {
                    if (dragRow != null) {
                        var ddata = {};          ...