LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / Column Appearance




This sample shows how to change the appearance of columns in TreeGrid.

There are two color schemes to choose from, which will change the appearance of the TreeGrid. We are using custom CSS styles which are applied to the controlStyle of the TreeGrid. This property accepts an object which defines how each part of the TreeGrid will look, whether it is a column, row or cell.

For more information, check out the source code of this 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" control-style="ctrlStyle" allow-focus="false" grid-lines="gridLines"></iui-treegrid>

<div>

<label><input type="radio" ng-model="colorScheme" value="1" />Color Scheme 1</label><br/><br/>

<label><input type="radio" ng-model="colorScheme" value="2" />Color Scheme 2</label>

</div>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.gridLines = 'both';

$scope.colorScheme = 1;

 

var redColumn = {

header: {

normal: 'header-red'

},

footer: {

normal: 'footer-red'

}

}

 

var greenColum = {

header: {

normal: 'header-green'

},

footer: {

normal: 'footer-green'

}

}

 

var blueColumn = {

header: {

normal: 'header-blue'

},

footer: {

normal: 'footer-blue'

}

}

 

var redColumnLine = {

header: { normal: 'header-red-line' },

footer: { normal: 'footer-gray-line' }

}

 

var greenColumnLine = {

header: { normal: 'header-green-line' },

footer: { normal: 'footer-gray-line' }

}

 

var blueColumnLine = {

header: { normal: 'header-blue-line' },

footer: { normal: 'footer-gray-line' }

}

 

$scope.ctrlStyle = {}

var customCtrlStyle = {

column: {

header: {

content: 'header-cell-content',

hovered: 'column-hover-line',

selected: 'column-selected'

}

},

row: {

general: {

hovered: 'row-hovered',

selected: 'row-selected'

}

},

cell: {

hovered: 'cell-hovered'

}

}

 

$scope.columns = [

{ name: 'Column1', headerText: 'Header1', headerAlignment: 'center', footerText: 'Footer1', width: 200, style: redColumn },

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

{ name: 'Column3', headerText: 'Header3', headerAlignment: 'center', footerText: 'Footer3', width: 120, style: blueColumn }

];

 

$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" }] }

];

 

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

if (newValue != oldValue){

switch (newValue){

case '1':

$scope.gridLines = 'both';

$scope.ctrlStyle = null;

 

for (var j = 0; j < $scope.columns.length; j++){

switch (j){

case 0:

$scope.columns[j].style = redColumn

break;

case 1:

$scope.columns[j].style = greenColumn

break;

case 2:

$scope.columns[j].style = blueColumn

break;

}

}

break;

 

case '2':

$scope.gridLines = 'none';

$scope.ctrlStyle = customCtrlStyle;

 

for (var j = 0; j < $scope.columns.length; j++){

switch (j){

case 0:

$scope.columns[j].style = redColumnLine

break;

case 1:

$scope.columns[j].style = greenColumnLine

break;

case 2:

$scope.columns[j].style = blueColumnLine

break;

}

}

break;

}

 

$gridService.updateView($scope.gridName);

}

});

}]);

/* TreeGrid settings */

.header-cell-content

{

margin-bottom: 3px;

}

 

/*Color Scheme 1 */

.row-hovered

{

background: white

}

.header-red

{

background: #be0000;

border-color: #800000;

color: white;

}

.header-green

{

background: #00be00;

border-color: #008000;

color: white;

}

.header-blue

{

background: #0000be;

border-color: #000080;

color: white;

}

.footer-red

{

background: #ff8020;

border-color: #ce6412;

color: white;

}

.footer-green

{

background: #80ce20;

border-color: #64a112;

color: white;

}

.footer-blue

{

background: #2080ff;

border-color: #1264ce;

color: white;

}

 

/*Color Scheme 2 */

.column-hover-line

{

background: white;

color: red;

}

.header-red-line

{

background: white;

border-color: transparent;

border-bottom: 2px solid #be0000;

}

.header-green-line

{

background: white;

border-color: transparent;

border-bottom: 2px solid #00be00;

}

.header-blue-line

{

background: white;

border-color: transparent;

border-bottom: 2px solid #0000be;

}

.footer-gray-line

{

background: white;

border-color: white;

border-top: 2px solid #cecece;

}

.column-hover-line

{

border-color: transparent;

border-bottom: 2px solid #999999;

color: red;

}

.column-selected

{

border-color: transparent;

border-bottom: 2px solid #999999;

font-weight: bold;

}

.row-hovered

{

background: transparent;

color: blue;

}

.row-selected

{

background: transparent;

color: red;

font-weight: bold;

}

.cell-hovered

{

background: transparent;

}