LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Column Reorder



Reorder permissions:



This sample shows how to reorder columns by simply left-click on column header and drag&drop it to other column header. The reorder process is controlled by three variables:

  • allowColumnReorder - a TreeGrid attribute which determines whether all columns can be reordered
  • allowDrag - a field in column object which determines whether specified column can be moved
  • allowDrop - a field in column object which determines whether other columns can drop over specified column

You can prevent specific column from dragging by setting the allowDrag field for that column object to false. In similar way if you dont want dragged columns to be dropped over specific column, you can set the allowDrop field for that column object to false.

You can change the names of thee fields by using custom names set in your code. To see how this can be done, check out the Data Binding sample.

<!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="columns" rows="rows" row-icon="defaultIcon" show-footer="false" grid-lines="gridLines" after-select="onAfterSelect(e)" allow-column-reorder="true"></iui-treegrid>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.rows = [];

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

$scope.gridLines = 'horizontal';

$scope.allowDrag = true;

$scope.allowDrop = true;

 

var supressCallback = false;

 

$scope.columns = [

{ id: 1, headerText: "Name", width: 200 },

{ id: 2, headerText: "Date Modified", headerAlignment: "center", contentAlignment: "center", width: 125, allowDrag: false },

{ id: 3, headerText: "Type", headerAlignment: "center", width: 120 },

{ id: 4, headerText: "Size", headerAlignment: "center", contentAlignment: "right", width: 125 }

];

 

$scope.flatData = [

{

id: 1,

text: "Favorites",

icon: "icons-medium favorites",

cells: [{ cid: 1, text: "Favorites" }]

},

{

id: 11,

pid: 1,

text: "Desktop",

cells: [{ cid: 1, text: "Desktop" }, { cid: 2, text: "4/7/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "7 KB" }]

},

{

id: 12,

pid: 1,

text: "Downloads",

icon: "icons-medium downloads",

cells: [{ cid: 1, text: "Downloads" }, { cid: 2, text: "4/3/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "23,719 KB" }]

},

{

id: 2,

text: "Libraries",

icon: "icons-medium folder",

cells: [{ cid: 1, text: "Libraries" }]

},

{

id: 21,

pid: 2,

text: "Documents",

icon: "icons-medium documents",

expanded: false,

cells: [{ cid: 1, text: "Documents" }, { cid: 3, text: "Library" }, { cid: 4, text: "104 KB" }]

},

{

id: 211,

pid: 21,

text: "My Documents",

cells: [{ cid: 1, text: "My Documents" }, { cid: 2, text: "4/7/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "61 GB" }]

},

{

id: 212,

pid: 21,

text: "Public Documents",

cells: [{ cid: 1, text: "Public Documents" }, { cid: 2, text: "2/17/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "43 KB" }]

},

{

id: 22,

pid: 2,

text: "Music",

icon: "icons-medium music-note",

cells: [{ cid: 1, text: "Music" }, { cid: 2, text: "3/19/2015" }, { cid: 3, text: "Library" }, { cid: 4, text: "12,748 KB" }]

},

{

id: 23,

pid: 2,

text: "Pictures",

icon: "icons-medium pictures",

cells: [{ cid: 1, text: "Pictures" }, { cid: 2, text: "1/29/2015" }, { cid: 3, text: "Library" }, { cid: 4, text: "1,079 KB" }]

},

{

id: 24,

pid: 2,

text: "Videos",

icon: "icons-medium videos",

cells: [{ cid: 1, text: "Videos" }, { cid: 2, text: "4/5/2015" }, { cid: 3, text: "Library" }, { cid: 4, text: "37,251 KB" }]

},

{

id: 3,

icon: "icons business",

text: "Computer",

icon: "icons-medium pc",

cells: [{ cid: 1, text: "Computer" }]

},

{

id: 31,

pid: 3,

text: "Local Disk (C:)",

icon: "icons-medium disk",

cells: [{ cid: 1, text: "Local Disk (C:)" }, { cid: 2, text: "4/3/2015" }, { cid: 3, text: "Local Disk" }, { cid: 4, text: "249 GB" }]

},

{

id: 32,

pid: 3,

text: "Storage (D:)",

icon: "icons-medium disk",

cells: [{ cid: 1, text: "Storage (D:)" }, { cid: 2, text: "1/27/2015" }, { cid: 3, text: "Local Disk" }, { cid: 4, text: "449 GB" }]

},

{

id: 4,

text: "Network",

icon: "icons-medium network",

cells: [{ cid: 1, text: "Network" }]

},

{

id: 5,

text: "Recycle Bin",

icon: "icons-medium recycle",

cells: [{ cid: 1, text: "Recycle Bin" }, { cid: 2, text: "2/7/2015" }, { cid: 4, text: "5,296 KB" }]

}

];

 

var loadTimer = $timeout(function(){

$gridService.loadData($scope.gridName, $scope.flatData);

$scope.selColumn = $scope.columns[0];

 

$timeout.cancel(loadTimer);

}, 1);

 

var updatePermissionValues = function(column){

$scope.allowDrag = column.allowDrag != undefined ? column.allowDrag : true;

$scope.allowDrop = column.allowDrop != undefined ? column.allowDrop : true;

}

 

$scope.onAfterSelect = function(e){

if (supressCallback)

return;

 

if (e.object && e.object.type == 'column'){

$scope.selColumn = $gridService.selectedColumn($scope.gridName);

 

updatePermissionValues(e.object);

$scope.$apply();

}

}

 

$scope.$watch("selColumn", function(newValue, oldValue){

if (newValue != oldValue){

supressCallback = true;

$gridService.selectedColumn($scope.gridName, newValue);

supressCallback = false;

 

updatePermissionValues(newValue);

 

$gridService.updateView($scope.gridName);

}

});

 

$scope.$watch("allowDrag", function(newValue, oldValue){

if (newValue != oldValue)

$scope.selColumn.allowDrag = newValue;

});

 

$scope.$watch("allowDrop", function(newValue, oldValue){

if (newValue != oldValue)

$scope.selColumn.allowDrop = newValue;

});

}]);

.iui-treegrid-column-header-cell

{

padding: 0 3px;

}

.iui-treegrid-row-cell-content

{

padding: 4px 3px;

}

.iui-treegrid-column-reorder-mark-left

{

background-image: url(../../../resources/move-left-white.png);

}

.iui-treegrid-column-reorder-mark-right

{

background-image: url(../../../resources/move-right-white.png);

}