Wijmo 5 - AngularJS directives

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/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>

CSS

.wj-flexgrid {
  height: 150px; 
  margin-top:10px;
 }
 .wj-flexchart {
   height: 300px;
 }

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 = {};          ...