LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Drag Drop Events with Custom Conditions


This sample shows how to handle Drag Drop events in TreeGrid directive to set custom conditions.

In our example, orders from different customers are prevented from moving. You can only reorder orders within the same customer, but you can't move a specific order from one customer to another. You can still change the order of customers, in whole with their orders. Additonally, an order cannot become a child of another order. This is all handled by simple conditions set in event handlers for drag drop events.

By dragging a specific order you may notice that mouse cursor changes, and a tooltip is shown whenever drop position is allowed.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.treegrid.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.lists.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.treegrid.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-treegrid name="{{gridName}}" columns="sampleColumns" rows="sampleRows" row-icon="defaultIcon" allow-drag="true" allow-drop="true" drag-over="onDragOver(e)" drag-drop="onDragDrop(e)" show-footer="false"></iui-treegrid>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){

$scope.gridName = "gridSample";

$scope.sampleRows = [];

$scope.defaultIcon = "icons-medium empty-doc";

 

$scope.sampleColumns = [

{ id: 1, columnTitle: "Customer/Order ID", columnAlignment: "center", size: 180 },

{ id: 2, columnTitle: "Ordered", columnAlignment: "center", cellAlignment: "center", size: 90 },

{ id: 3, columnTitle: "Shipped", columnAlignment: "center", cellAlignment: "center", size: 90 },

{ id: 4, columnTitle: "Ship Via", columnAlignment: "center", size: 125 },

{ id: 5, columnTitle: "Freight", columnAlignment: "center", cellAlignment: "right", size: 80 },

{ id: 6, columnTitle: "Address", columnAlignment: "center", size: 200 },

{ id: 7, columnTitle: "City", columnAlignment: "center" },

{ id: 8, columnTitle: "Country", columnAlignment: "center" }

 

];

 

$scope.flatData = [

{

rowID: 1,

icon: "icons-medium people",

rowText: "Piccolo und mehr",

cells: [{ cid: 1, cellText: "Piccolo und mehr" }, { cid: 6, cellText: "Geislweg 14" }, { cid: 7, cellText: "Salzburg" }, { cid: 8, cellText: "Austria" }]

},

{

rowID: 11,

parentID: 1,

rowText: "Order #10259",

cells: [{ cid: 1, cellText: "10259" }, { cid: 2, cellText: "9/13/2012" }, { cid: 3, cellText: "9/27/2012" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "360.63" }]

},

{

rowID: 12,

parentID: 1,

rowText: "Order #11094",

cells: [{ cid: 1, cellText: "11094" }, { cid: 2, cellText: "1/20/2013" }, { cid: 3, cellText: "2/5/2013" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "200.14" }]

},

{

rowID: 2,

icon: "icons-medium people",

rowText: "Frankenversand",

cells: [{ cid: 1, cellText: "Frankenversand" }, { cid: 6, cellText: "Berliner Platz 43" }, { cid: 7, cellText: "Munchen" }, { cid: 8, cellText: "Germany" }]

},

{

rowID: 21,

parentID: 2,

rowText: "Order #11536",

cells: [{ cid: 1, cellText: "11536" }, { cid: 2, cellText: "12/9/2013" }, { cid: 3, cellText: "1/7/2014" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "85.53" }]

},

{

rowID: 22,

parentID: 2,

rowText: "Order #14472",

cells: [{ cid: 1, cellText: "14472" }, { cid: 2, cellText: "11/14/2014" }, { cid: 3, cellText: "11/25/2014" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "112.30" }]

},

{

rowID: 23,

parentID: 2,

rowText: "Order #17293",

cells: [{ cid: 1, cellText: "17293" }, { cid: 2, cellText: "1/17/2015" }, { cid: 3, cellText: "2/12/2015" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "184.25" }]

},

{

rowID: 24,

parentID: 2,

rowText: "Order #17318",

cells: [{ cid: 1, cellText: "17318" }, { cid: 2, cellText: "1/29/2015" }, { cid: 3, cellText: "2/27/2015" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "99.37" }]

},

{

rowID: 3,

icon: "icons-medium people",

rowText: "Laughing Bacchus Wine Cellars",

cells: [{ cid: 1, cellText: "Laughing Bacchus Wine Cellars" }, { cid: 6, cellText: "1900 Oak St." }, { cid: 7, cellText: "Vancouver" }, { cid: 8, cellText: "Canada" }]

},

{

rowID: 31,

parentID: 3,

rowText: "Order #11495",

cells: [{ cid: 1, cellText: "11495" }, { cid: 2, cellText: "8/7/2013" }, { cid: 3, cellText: "9/20/2013" }, { cid: 4, cellText: "United Package" }, { cid: 5, cellText: "49.28" }]

},

{

rowID: 32,

parentID: 3,

rowText: "Order #11517",

cells: [{ cid: 1, cellText: "11517" }, { cid: 2, cellText: "9/2/2013" }, { cid: 3, cellText: "10/7/2013" }, { cid: 4, cellText: "United Package" }, { cid: 5, cellText: "54.97" }]

}

];

 

$scope.dataFields = {

column: {

headerText: 'columnTitle',

headerAlignment: 'columnAlignment',

contentAlignment: 'cellAlignment',

width: 'size'

},

row: {

id: 'rowID',

pid: 'parentID',

text: 'rowText'

},

cell: {

text: 'cellText'

}

}

 

var loadTimer = $timeout(function(){

$gridService.loadData($scope.gridName, $scope.flatData, null, $scope.dataFields, true);

 

$timeout.cancel(loadTimer);

}, 1);

 

var isRoot = function(row){

return row ? row.parentID == undefined || row.parentID == '' : false;

}

 

$scope.onDragOver = function(e){

// Check whether there is dragging and target row, in order to set our conditions

if (e.dragRow && e.targetRow){

// Prevent a root row to become a child of another root row, only allow reposition

if (isRoot(e.dragRow) && isRoot(e.targetRow)){

if (e.dropPos == 0)

return false;

}

// Prevent dragged row to be dropped outside its parent row

// In our example this means orders of one customer cannot move to another customer

else if (e.dragRow.parentID != e.targetRow.parentID)

return false;

// Each row cannot become a child of target row

// In our example this means orders cannot be placed inside another order

else if (e.dropPos == 0 && e.dragRow.parentID == e.targetRow.parentID)

return false;

}

}

 

$scope.onDragDrop = function(e){

// If dragged row is dropped over TreeGrid space, the drop operation is cancelled

// In our example this means that orders cannot become placed as customers, meaning as root rows

if (e.dropPos == -1 && e.dragRow && e.dragRow.parentID)

return false;

}

}]);

.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell

{

padding: 1px 3px;

}

.iui-treegrid-row-cell-content

{

padding: 1px 3px;

}

.icons-medium

{

background-image: url(../resources/icons-x24.png);

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0 !important;

margin: 0 1px 0 5px;

width: 24px;

height: 24px;

vertical-align: middle;

}

.empty-doc

{

background-position: -24px -48px;

}

.people

{

background-position: -120px -72px;

}