LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / Cells in Different Colors


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

Initially, all cells when hovered will change their text color to red. This is set in the general style of the TreeGrid. There is a controlStyle attribute, which accepts an object that represents the overall style of the directive. You can override the default appearance of all parts of the TreeGrid, by applying changes for all objects (column, row or cell) within this general style.

Additionally, three cells have a different look: red, green and blue. This is set in our sample data source, by using the style field of cell object. This field can accept a custom CSS class, in which you can set your own colors.

When a cell is clicked, you will notice how its background and text color changes. This is done by handling the cellClick event where we apply a different style to clicked 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" selection-mode="none" cell-click="onCellClick(e)" grid-lines="gridLines"></iui-treegrid>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.gridLines = 'both';

 

var redCell = {

normal: 'cell-red',

hovered: 'cell-red'

}

 

var greenCell = {

normal: 'cell-green',

hovered: 'cell-green'

}

 

var blueCell = {

normal: 'cell-blue',

hovered: 'cell-blue'

}

 

$scope.ctrlStyle = {

row: {

general: {

hovered: 'row-hovered'

},

cell: {

hovered: 'cell-hover'

}

}

}

 

$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", style: greenCell }] },

{

id: 12,

pid: 1,

text: "Item12",

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

rows: [

{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211", style: blueCell }, { 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", style: redCell }, { 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.onCellClick = function(e){

if (e.cell.mark == undefined)

e.cell.mark = 0;

e.cell.mark++;

if (e.cell.mark > 3)

e.cell.mark = 0;

 

switch (e.cell.mark){

case 1:

e.cell.style = redCell;

break;

case 2:

e.cell.style = greenCell;

break;

case 3:

e.cell.style = blueCell;

break;

default:

e.cell.style = null;

break;

}

 

$gridService.refresh($scope.gridName, e.cell, e.row);

}

}]);

.row-hovered

{

background: white;

}

.cell-red

{

background: url("red-cell.png") right no-repeat;

background: #be0000;

color: white;

}

.cell-green

{

background: url("red-cell.png") right no-repeat;

background: #00be00;

color: white;

}

.cell-blue

{

background: url("red-cell.png") right no-repeat;

background: #0000be;

color: white;

}

.cell-hover

{

background: white;

color: red;

}