LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Add CheckBox Column in AngularJS Grid

Created: 20 July 2015

Each cell in Grid directive by default shows only label. We can add custom content by choosing one of built-in editors or create a custom editor. In order for this to work, we need to set specifications for editor we are going to use. The following sections will show you how to add checkbox to grid cells using the IntegralUI CheckBox directive.

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

Column with CheckBox

In order to show a checkbox in grid column cells, we need to add specifications for the editor in following column fields:

  • editorType - determines the type of the editor we are going to use
  • editorSettings - specifies the appearance and behavior of the editor

Here how this looks like in the code:

angular

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

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

$scope.columns = [

{

id: 1,

editorType: 'checkbox',

editorSettings: {

style: {

general: 'checkbox',

box: {

general: 'checkbox-box',

checked: 'checkbox-checked',

unchecked: 'checkbox-unchecked'

}

}

},

contentAlignment: 'center',

width: 30,

fixedWidth: true

},

{ id: 2, headerText: "Title", width: 185},

{ id: 3, headerText: "Year", headerAlignment: "center", contentAlignment: "center", width: 70 },

{ id: 4, headerText: "Genre", headerAlignment: "center", contentAlignment: "center", width: 250 },

{ id: 5, headerText: "Ratings", headerAlignment: "center", contentAlignment: "center", width: 80 },

{ id: 6, headerText: "Released", headerAlignment: "center", contentAlignment: "center", width: 130 }

];

}]);

<!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" control-style="controlStyle" show-footer="false" grid-lines="gridLines" allow-focus="false" cellvalue-changing="onCellValueChanging(e)"></iui-treegrid>

</div>

</body>

</html>

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

{

padding: 2px 2px;

}

.iui-treegrid-row-cell-content

{

padding: 2px 2px;

}

.row-hovered

{

background-color: #efefef;

}

.row-cell-hovered

{

color: #000080;

}

.row-selected

{

background-color: #dedede;

color: #008000;

font-style: italic;

}

Related: Add CheckBox to Column Header in AngularJS Grid

As above code shows, editorType value is set to 'checkbox', and editorSettings value is set to an object that holds different checkbox properties. Depending on these settings, checkbox can appear and behave in different way. Here is a list of all acceptable fields:

$scope.columns[0].editorSettings = {

style: {

general: 'checkbox', // String. A CSS class name that holds general settings

box: {

general: 'checkbox-box', // String. A CSS class name that holds general settings for the checkbox

disabled: 'checkbox-disabled', // String. A CSS class name that determines the appearance of check box when it is disabled

checked: 'checkbox-checked', // String. A CSS class name that determines the appearance of check box when it is checked

indeterminate: 'checkbox-indeterminate', // String. A CSS class name that determines the appearance of check box when it is undetermined

unchecked: 'checkbox-unchecked' // String. A CSS class name that determines the appearance of check box when it is unchecked

}

},

threeState: false // Boolean. If true, checkboxes will have tri-state values.

}

You can create custom CSS classes with different settings, after that only the class name to one of above fields, and checkbox will update its layout. Here is an example:

.checkbox

{

width: 16px;

margin: auto;

}

.checkbox-box

{

border: 0;

display: inline-block;

width: 16px;

height: 16px;

}

.checkbox-checked

{

background-image: url("../../../resources/checkbox/checkbox-checked.png");

}

.checkbox-unchecked

{

background-image: url("../../../resources/checkbox/checkbox-unchecked.png");

}

As you can see, we are using custom images for different states of the checkbox. There are several predefined image sets to choose from, here is an example: CheckBox with Custom Appearance. You don't have to use images if you don't have to, only change the color of check mark or border:

$scope.columns[0].editorSettings.style.box.checked = 'red-checked';

.red-checked

{

border: thin solid #800000;

border-radius: 3px;

color: red;

}

In this way, you can change the behavior and appearance of the check box, dynamically from code.

Handling CheckBox Events

Whenever a cell checkbox is clicked, the following events are fired:

By adding handlers to these events in your code, you can create custom operations or prevent changes to a specific checkbox by using some condition. To see how this looks like in action, check out the article below.

Related: AngularJS Tree Grid with Cascading Checkboxes

For example, we can set the value of checkbox in second row to remain the same by handling the cellvalueChanging event, like this:

var updateCheckValues = function(row, value){

$scope.onCellValueChanging = function(e){

if (e.row.id == 2)

return false;

}

}

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" cellvalue-changing="onCellValueChanging(e)"></iui-treegrid>

As above demonstration shows, the cells in first column of the Grid directive have a checkbox that accepts two state values represented with custom images, set in our code. The complete sample code is available as part of the 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.