Drag and drop rows within ui grid in Angular js

Ui Grid is the popular grid system specially for Angular 1.x(Currently ui-grid doesn’t support angular 2 and above version). Ui-grid has no dependency rather than angular which makes it light weight. It has very rich feature set such as sorting, filtering, grouping and pagination and also has server side support for data-binding and pagination.

drag and drop rows within grid in angularjs

This article demonstrates that how can you rearrange rows by performing drag and drop within ui-grid with the help of ‘ui-grid-draggable-rows’ plugin.

Add reference of ‘ui-grid-draggable-rows’ plugin

First install ‘ui-grid-draggable-rows’ plugin, if you are using npm then run the command
npm install ui-grid-draggable-rows
and add the refrence of the ‘ui-grid-draggable-rows’ library:

<script src="/node-modules/ui-grid-draggable-rows/ui-grid-draggable-rows.js">
</script>

if you are using bower then run the command:
bower install ui-grid-draggable-rows
and add the refrence of the ‘ui-grid-draggable-rows’ library:

 <script src="/bower-components/ui-grid-draggable-rows/ui-grid-draggable-rows.js">
 </script>

You can also download directly from github.

Add dependency in your angular application

Adter adding refrence of the plugin add dependency in your angular application like this:

var app = angular.module("app", ["ui.grid", "ui.grid.draggable-rows"]);

How to use

To add drag and drop functionality you have to insert ‘ui-grid-draggable-rows’ directive to your table.

<div ng-controller="gridController">
  <div ui-grid="gridOptions" class="grid" ui-grid-draggable-rows></div>
</div>

Controller Code:

            app.controller('gridController', ['$scope', gridController]);
 
        function gridController($scope) {
 
            $scope.gridOptions = {
                rowTemplate: '<div grid="grid" class="ui-grid-draggable-row" ' +
                    'draggable="true"><div ng-repeat="(colRenderIndex, col) in ' +
                    'colContainer.renderedColumns track by col.colDef.name" ' +
                    'class="ui-grid-cell" ' +
                    'ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader, \'custom\': true }" ' +
                    'ui-grid-cell></div></div>',
 
                data: [{
                    "AgentName": "John",
                    "department": "Sales",
                    "order": 1
                }, {
                    "AgentName": "David",
                    "department": "Marketting",
                    "order": 2
                }, {
                    "AgentName": "Smith",
                    "department": "Sales",
                    "order": 3
                }, {
                    "AgentName": "Jeremy",
                    "department": "Sales",
                    "order": 4
                }]
            };
            $scope.gridOptions.onRegisterApi = function(gridApi) {
                gridApi.draggableRows.on.rowDropped($scope, function(info, dropTarget) {
                    console.log("Dropped", info);
                });
            };
        };

Update data after dropping row

You can update the scope data after dropping row. Suppose if we want to update the agent’s orders of the corresponding to dragged and target rows, you can use ‘rowDropped’ event which is the wrapper of the onDrop html5 event. See in the below:

$scope.gridOptions.onRegisterApi = function(gridApi) {
    gridApi.draggableRows.on.rowDropped($scope, function(info, dropTarget) {
        var draggedEntity = info.draggedRowEntity,
            targetEntity = info.targetRowEntity,
            // info.fromIndex return zero based index value
            fromIndex = info.fromIndex, 
            // info.toIndex return zero based index value
            toIndex = info.toIndex; 
 
        draggedEntity.order = toIndex + 1;
        targetEntity.order = fromIndex + 1;
 
    });
};

Styling

You can control styling of drag and drop effect by using these avaialble css classes:

.ui-grid-draggable-row-target css class for drag effect.

.ui-grid-draggable-row-over css class will be added on the row where drag pointer hover.

.ui-grid-draggable-row-over--above and .ui-grid-draggable-row-over--below: css classes are used for showing target place for dropping row.