LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Column Alignment

Header Alignment


Content Alignment


Footer Alignment



A demonstration on how to change alignment of column header, content and footer in TreeGrid directive for AngularJS. By clicking on radio-buttons on right panel, you can change the alignment of each cell for currently selected column. By default column's content is aligned to the left.

Each column object has three fields which allows you to horizontally align the content of cells that belong to specified column.

  • headerAlignment - aligns the content of column header
  • contentAlignment - aligns the content of column body
  • footerAlignment - aligns the content of column footer

<!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" after-select="onAfterSelect(e)" grid-lines="gridLines"></iui-treegrid>

<div>

<label>Selected Column: </label>

<select ng-model="selColumn" ng-options="column.name for column in columns"></select>

<p class="alignBlock">Header Alignment</p>

<label class="alignVal"><input type="radio" ng-model="headerAlignment" value="left" />Left</label>

<label class="alignVal"><input type="radio" ng-model="headerAlignment" value="center" />Center</label>

<label class="alignVal"><input type="radio" ng-model="headerAlignment" value="right" />Right</label><br />

<p class="alignBlock">Content Alignment</p>

<label class="alignVal"><input type="radio" ng-model="contentAlignment" value="left" />Left</label>

<label class="alignVal"><input type="radio" ng-model="contentAlignment" value="center" />Center</label>

<label class="alignVal"><input type="radio" ng-model="contentAlignment" value="right" />Right</label><br />

<p class="alignBlock">Footer Alignment</p>

<label class="alignVal"><input type="radio" ng-model="footerAlignment" value="left" />Left</label>

<label class="alignVal"><input type="radio" ng-model="footerAlignment" value="center" />Center</label>

<label class="alignVal"><input type="radio" ng-model="footerAlignment" value="right" />Right</label><br />

</div>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.headerAlignment = 'left';

$scope.contentAlignment = 'left';

$scope.footerAlignment = 'left';

$scope.gridLines = 'vertical';

 

var supressCallback = false;

 

$scope.columns = [

{ name: 'Column1', headerText: 'Header1', footerText: 'Footer1', headerAlignment: 'center', footerAlignment: 'right', width: 200 },

{ name: 'Column2', headerText: 'Header2', footerText: 'Footer2', headerAlignment: 'center', contentAlignment: 'center', width: 250 },

{ name: 'Column3', headerText: 'Header3', footerText: 'Footer3', contentAlignment: 'right', footerAlignment: 'right', width: 120 }

];

 

$scope.rows = [

{

id: 1,

text: "Item1",

cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }],

rows: [

{ id: 11, pid: 1, text: "Item11", cells: [{ text: "Item111" }, { text: "Item112" }, { text: "Item113" }] },

{

id: 12,

pid: 1,

text: "Item12",

cells: [{ text: "Item121" }, { text: "Item122" }, { text: "Item123" }],

rows: [

{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211" }, { text: "Item1212" }, { text: "Item1213" }] },

{

id: 122,

pid: 12,

text: "Item122",

cells: [{ text: "Item1221" }, { text: "Item1222" }, { text: "Item1223" }],

expanded: false,

rows: [

{ id: 1221, pid: 122, text: "Item1221", cells: [{ text: "Item12211" }, { text: "Item12212" }, { text: "Item12213" }] },

{ id: 1222, pid: 122, text: "Item1222", cells: [{ text: "Item12221" }, { text: "Item12222" }, { text: "Item12223" }] }

]

},

{ id: 123, pid: 12, text: "Item123", cells: [{ text: "Item1231" }, { text: "Item1232" }, { text: "Item1233" }] }

]

},

{ id: 13, pid: 1, text: "Item13", cells: [{ text: "Item131" }, { text: "Item132" }, { text: "Item133" }] },

{

id: 14,

pid: 1,

text: "Item14",

cells: [{ text: "Item141" }, { text: "Item142" }, { text: "Item143" }],

expanded: false,

rows: [

{ id: 141, pid: 14, text: "Item141", cells: [{ text: "Item1411" }, { text: "Item1412" }, { text: "Item1413" }] },

{ id: 142, pid: 14, text: "Item142", cells: [{ text: "Item1421" }, { text: "Item1422" }, { text: "Item1423" }] }

]

}

]

},

{

id: 2,

text: "Item2",

cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }],

rows: [

{ id: 21, pid: 2, text: "Item21", cells: [{ text: "Item211" }, { text: "Item212" }, { text: "Item213" }] },

{ id: 22, pid: 2, text: "Item22", cells: [{ text: "Item221" }, { text: "Item222" }, { text: "Item223" }] },

{

id: 23,

pid: 2,

text: "Item23",

cells: [{ text: "Item231" }, { text: "Item232" }, { text: "Item233" }],

expanded: false,

rows: [

{ id: 231, pid: 23, text: "Item231", cells: [{ text: "Item2311" }, { text: "Item2312" }, { text: "Item2313" }] },

{ id: 232, pid: 23, text: "Item232", cells: [{ text: "Item2321" }, { text: "Item2322" }, { text: "Item2323" }] }

]

}

]

},

{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }] }

];

 

var initTimer = $timeout(function(){

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

 

updateAlignValues($scope.selColumn);

 

$timeout.cancel(initTimer);

}, 1);

 

$scope.onAfterSelect = function(e){

if (supressCallback)

return;

 

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

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

 

updateAlignValues(e.object);

 

$scope.$apply();

}

}

 

var updateAlignValues = function(column){

$scope.headerAlignment = column.headerAlignment ? column.headerAlignment : 'left';

$scope.contentAlignment = column.contentAlignment ? column.contentAlignment : 'left';

$scope.footerAlignment = column.footerAlignment ? column.footerAlignment : 'left';

}

 

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

if (newValue != oldValue){

$scope.selColumn.headerAlignment = newValue;

$gridService.updateView($scope.gridName);

}

});

 

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

if (newValue != oldValue){

$scope.selColumn.contentAlignment = newValue;

$gridService.updateView($scope.gridName);

}

});

 

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

if (newValue != oldValue){

$scope.selColumn.footerAlignment = newValue;

$gridService.updateView($scope.gridName);

}

});

 

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

if (newValue != oldValue){

supressCallback = true;

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

supressCallback = false;

 

updateAlignValues(newValue);

 

$gridService.updateView($scope.gridName);

}

});

}]);

.alignBlock

{

margin: 25px 0 5px 0;

padding: 0;

}

.alignVal

{

margin: 0 5px;

}

select

{

margin: 5px 0 0 0;

width: 100px;

}