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">

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

        <p>Drag rows from the grid by data cells:</p>
        <wj-flex-grid control="wg" items-source="data" allow-dragging="Columns"
        selection-mode="Row"
                          allow-add-new="true"
                          allow-delete="false"
                          track-changes="true"
                          new-row-at-top="true"
                          row-edit-ending="edit(s,e)"
                          beginning-edit="bedit(s,e)"
        
        initialized="makeDraggable(s,e)" is-editable="true">
        </wj-flex-grid>
          <button ng-click="save()">
      save
    </button>
    </div>

JavaScript

var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope) {
            var form = this;
           $scope.save = function(){
            		//$scope.data.commitEdit();
            		//console.log($scope.data);
               // console.log($scope.wg);
               $scope.wg.collectionView.commitEdit();
               console.log("added-----",$scope.wg.collectionView.itemsAdded);
               console.log("edited-----------",$scope.wg.collectionView.itemsEdited);
            }
            $scope.edit = function(s,e){
            		//$scope.data.commitEdit();
            		//console.log($scope.data);
                //console.log($scope.data.itemsAdded);
                 //console.log($scope.data.itemsEdited);
            }
            $scope.bedit = function(s,e){
            		//$scope.data.commitEdit();
            		//console.log($scope.data);
                console.log($scope.data.itemsAdded);
                 console.log($scope.data.itemsEdited);
            }
            $scope.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;
                     ...