LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Cells with CheckBox


This example shows how to add check box to cells in TreeGrid, AngularJS. This is done by setting the editorType field of specified column to 'checkbox', which allows CheckBox component to appear inside a cell. By default, check box is set to accept two values: true or false. However, you can change this in editorSettings to allow check box to have tri-state values: 'unchecked', 'indeterminate' and 'checked'.

Each cell has a value field which can accept custom objects, in case of an check box, it accepts one of these values:

When two-state mode is set:

  • false - a check box inside the cell is unchecked
  • true - a check box inside the cell is checked

When tri-state mode is set:

  • 'unchecked' - a check box inside the cell is unchecked
  • 'indeterminate' - a check box inside the cell is indeterminate
  • 'checked' - a check box inside the cell is checked

Whenever a cell value is changed the CheckBox state is updated, and vice versa, when CheckBox state is changed, the value of cell object is also updated. These changes are accompanied with two events: cellvalueChanging and cellvalueChanged. By handling the cellvalueChanging, you can prevent check box value changes, by specifying custom conditions in your code. In case of this example, the second check box will remain its state.

<!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="sampleColumns" rows="sampleRows" row-icon="defaultIcon" show-footer="false" cellvalue-changing="onCellValueChanging(e)" tabindex="0"></iui-treegrid>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.sampleRows = [];

$scope.defaultIcon = "icons-medium empty-doc";

 

$scope.sampleColumns = [

{ id: 9, editorType: 'checkbox', editorSettings: { threeState: true }, cellAlignment: 'center', size: 30, fixedWidth: true },

{ id: 1, columnTitle: "Customer/Order ID", columnAlignment: "center", size: 250 },

{ id: 2, columnTitle: "Ordered", columnAlignment: "center", cellAlignment: "center", size: 120 },

{ id: 3, columnTitle: "Shipped", columnAlignment: "center", cellAlignment: "center", size: 120 },

{ id: 4, columnTitle: "Ship Via", columnAlignment: "center", size: 130 },

{ id: 5, columnTitle: "Freight", columnAlignment: "center", cellAlignment: "right", size: 100 },

{ id: 8, columnTitle: "Country", columnAlignment: "center", cellAlignment: 'center' }

];

 

$scope.flatData = [

{

rowID: 1,

icon: "icons-medium people",

rowText: "Piccolo und mehr",

cells: [{ cid: 9, value: 'checked' }, { cid: 1, cellText: "Piccolo und mehr" }, { cid: 6, cellText: "Geislweg 14" }, { cid: 7, cellText: "Salzburg" }, { cid: 8, cellText: "Austria" }]

},

{

rowID: 11,

parentID: 1,

rowText: "Order #10259",

cells: [{ cid: 1, cellText: "10259" }, { cid: 2, cellText: "9/13/2012" }, { cid: 3, cellText: "9/27/2012" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "360.63" }]

},

{

rowID: 12,

parentID: 1,

rowText: "Order #11094",

cells: [{ cid: 1, cellText: "11094" }, { cid: 2, cellText: "1/20/2013" }, { cid: 3, cellText: "2/5/2013" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "200.14" }]

},

{

rowID: 2,

icon: "icons-medium people",

rowText: "Frankenversand",

cells: [{ cid: 9, value: 'indeterminate' }, { cid: 1, cellText: "Frankenversand" }, { cid: 6, cellText: "Berliner Platz 43" }, { cid: 7, cellText: "Munchen" }, { cid: 8, cellText: "Germany" }]

},

{

rowID: 21,

parentID: 2,

rowText: "Order #11536",

cells: [{ cid: 1, cellText: "11536" }, { cid: 2, cellText: "12/9/2013" }, { cid: 3, cellText: "1/7/2014" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "85.53" } ]

},

{

rowID: 22,

parentID: 2,

rowText: "Order #14472",

cells: [{ cid: 1, cellText: "14472" }, { cid: 2, cellText: "11/14/2014" }, { cid: 3, cellText: "11/25/2014" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "112.30" } ]

},

{

rowID: 3,

icon: "icons-medium people",

rowText: "Laughing Bacchus Wine Cellars",

cells: [{ cid: 9 }, { cid: 1, cellText: "Laughing Bacchus Wine Cellars" }, { cid: 6, cellText: "1900 Oak St." }, { cid: 7, cellText: "Vancouver" }, { cid: 8, cellText: "Canada" }]

},

{

rowID: 31,

parentID: 3,

rowText: "Order #11495",

cells: [{ cid: 1, cellText: "11495" }, { cid: 2, cellText: "8/7/2013" }, { cid: 3, cellText: "9/20/2013" }, { cid: 4, cellText: "United Package" }, { cid: 5, cellText: "49.28" } ]

}

];

 

$scope.dataFields = {

column: {

headerText: 'columnTitle',

headerAlignment: 'columnAlignment',

contentAlignment: 'cellAlignment',

width: 'size'

},

row: {

id: 'rowID',

pid: 'parentID',

text: 'rowText'

},

cell: {

text: 'cellText'

}

}

 

var loadTimer = $timeout(function(){

$gridService.expandColIndex($scope.gridName, 1);

$gridService.loadData($scope.gridName, $scope.flatData, null, $scope.dataFields, true);

 

$timeout.cancel(loadTimer);

}, 1);

 

$scope.onCellValueChanging = function(e){

if (e.row.rowID == 2)

return false;

}

}]);

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

{

padding: 1px 3px;

}

.iui-treegrid-row-cell-content

{

padding: 1px 3px;

}

.icons-medium

{

background-image: url(../resources/icons-x24.png);

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0 !important;

margin: 0 1px 0 5px;

width: 24px;

height: 24px;

vertical-align: middle;

}

.empty-doc

{

background-position: -24px -48px;

}

.people

{

background-position: -120px -72px;

}