LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Highlight Checked Rows in AngularJS Grid

Created: 17 July 2015

When a row in Grid directive for AngularJS is selected, it is displayed using a different background color than normal rows. However, this appearance is not persistent, when a different row is selected, the previously selected row will return to its normal state.

In order to highlight rows, we will change its background color using individual style. In our example, whenever row becomes checked, it also becomes highlighted, and vice versa, when a row is unchecked, it will return to its normal state. To make this demonstration more visually appealing, selection of rows is disabled.

TreeGrid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

By default all rows have their appearance set by general CSS styles. Tree Grid has an option to alter the appearance of each column, row or cell by simply overriding these CSS styles, through code. You may also notice that check box has a different appearance: blue border which when checked goes red with red check mark.

You can dynamically change the overall appearance of rows by simply applying a different CSS class to a specific row, based on its current state. There are 5 different states for a row: disabled, hovered, normal, focused and selected. By default each row is in normal state. As it can be seen from code of this sample, we are making checked rows to become highlighted by simply setting a CSS class.

So let us start first with creation of grid structure. In first column we will show check boxes, while other columns will display information about population in some countries:

angular

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

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

$scope.gridName = "gridSample";

 

$scope.columns = [

{

id: 1,

editorType: 'checkbox',

editorSettings: {

threeState: false,

style: {

general: 'checkbox',

box: {

checked: 'checkbox-checked',

unchecked: 'checkbox-unchecked'

}

}

},

contentAlignment: 'center',

width: 30,

fixedWidth: true

},

{ id: 2, headerText: "Continents/Countries", width: 220 },

{ id: 3, editorType: 'image', contentAlignment: 'center', width: 60 },

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

{ id: 5, headerText: "Date", headerAlignment: "center", contentAlignment: "center", width: 120 },

{ id: 6, headerText: "Land in km2", headerAlignment: "center", contentAlignment: "right", width: 90 },

{ id: 7, headerText: "Capital", headerAlignment: "center", width: 120 }

];

}]);

<!DOCTYPE html>

<html>

<head>

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

<link rel="stylesheet" href="css/integralui.checkbox.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.checkbox.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" show-footer="false" cellvalue-changed="onCellValueChanged(e)" allow-focus="false" selection-mode="none"></iui-treegrid>

</div>

</body>

</html>

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

{

padding: 1px 0;

}

.iui-treegrid-row-cell-content

{

padding: 2px 0;

}

.row-highlight

{

background: #008000;

color: white;

}

.checkbox

{

width: 14px;

margin: auto;

}

.checkbox-checked

{

border-color: red;

color: red;

}

.checkbox-unchecked

{

border-color: #000080;

}

As it can be seen from code above, first column has editorType set as 'checkbox' with editorSettings set to use custom CSS class names for check box appearance. This internally uses the IntegralUI CheckBox directive, which is assigned to each cell of specified column.

As for rows, we are using the following structure:

$scope.rows = [

{

id: 1,

text: "Africa",

expanded: false,

cells: [{ cid: 1 }, { cid: 2, text: "Africa" }],

rows: [

{ id: 11, pid: 1, text: "Egypt", cells: [{ cid: 1 }, { cid: 2, text: "Egypt" }, { cid: 3, value: '../../../resources/flags/egypt.png' }, { cid: 4, text: "88,311,000" }, { cid: 5, text: "06 Apr 2015" }, { cid: 6, text: "995,450" }, { cid: 7, text: "Cairo" }] },

{ id: 12, pid: 1, text: "Nigeria", cells: [{ cid: 1 }, { cid: 2, text: "Nigeria" }, { cid: 3, value: '../../../resources/flags/nigeria.png' }, { cid: 4, text: "185,043,000" }, { cid: 5, text: "01 Jul 2015" }, { cid: 6, text: "910,768" }, { cid: 7, text: "Abuja" }] },

{ id: 13, pid: 1, text: "South Africa", cells: [{ cid: 1 }, { cid: 2, text: "South Africa" }, { cid: 3, value: '../../../resources/flags/south-africa.png' }, { cid: 4, text: "54,002,000" }, { cid: 5, text: "01 Jul 2014" }, { cid: 6, text: "1,214,470" }, { cid: 7, text: "Pretoria" }] }

]

}

];

Cells are linked to columns using the id of specified column.

Next, we need to handle the cellvalueChanged event, which is fired whenever a cell value changes. This event carries the row and cell objects along with cell value. By handling this event we can determine when a row check box value changes, so that we can apply a different visual style. In that way when this value is set to true, we can apply a CSS style which changes the row so that it appears as highlighted. In other cases, we will remove this style from the row, so that in returns to its normal appearance.

$scope.onCellValueChanged = function(e){

if (e.value == true || e.value == 'checked'){

e.row.style = {

general: {

normal: 'row-highlight',

hovered: 'row-highlight',

selected: 'row-highlight'

}

}

}

else

e.row.style = null;

 

var refreshTimer = $timeout(function(){

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

 

$timeout.cancel(refreshTimer);

}, 1);

}

We are using the same CSS class for all row states: normal, hovered and selected. So that it will remain highlighted even when it is hovered or selected.

A complete source code for this sample and additional samples, is available as part of IntegralUI Studio for Web product package.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.