TreeGrid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 24 February 2015
Grid structure in the TreeGrid directive is consisted of column and row objects. Each column contains header and footer, and each row contains a collection of cell objects, one cell for each column present. In following sections we will show you how to use built-in methods to quickly add or remove column and rows in TreeGrid for AngularJS.
Similar: TreeGrid Component for Angular 2
All public methods that are available in Tree Grid directive are accessible from IntegralUITreeGridService. In case of dynamically adding or removing columns and rows, there is a separate method for each operation.
Note Because we can have multiple grids on the same page, in order to distinguish them, each grid needs to have a unique name. This name then is used as parameter in all public methods available in the IntegralUITreeGridService.
To add a new column to the Tree Grid, there are several methods to choose from:
Depending on which method you are using, the specified column will be placed at different position in the column collection. Here is an example:
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "IntegralUITreeGridService", function($scope, $gridService){
$scope.sampleColumns = [];
$scope.gridName = "gridSample";
var columnCount = 0;
// Creates a new column object
var createNewColumn = function(){
columnCount++;
var column = {
headerText: "Header" + columnCount,
footerText: "Footer" + columnCount
}
return column;
}
// Adds a new column at the last position in the column collection
$gridService.addColumn($scope.gridName, createNewColumn());
// Inserts a new column at position 1 in the column collection
$gridService.insertColumnAt($scope.gridName, createNewColumn(), 1);
}]);
<!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-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="sampleColumns" rows="sampleRows"></iui-treegrid>
</div>
</body>
</html>
In both cases a new column is created and added to the Tree Grid. In this way you can add multiple columns and place them at different positions programmatically in your code.
There is other way to create columns, that is by adding column objects directly to the column collection. This collection is linked to the columns in the Tree Grid and can be modified in your code. Here is an example:
$scope.gridName = "gridSample";
$scope.sampleColumns = [
{ headerText: "Header1", footerText: "Footer1"},
{ headerText: "Header2", footerText: "Footer2"},
{ headerText: "Header3", footerText: "Footer3"}
];
<iui-treegrid name="{{gridName}}" columns="sampleColumns"></iui-treegrid>
In similar way like with columns above, there are multiple methods which allows you to add a new row to a different position in the TreeGrid directive. Here is the list of available public methods:
Here is an example:
$scope.sampleRows = [];
$scope.gridName = "gridSample";
var rowCount = 0;
// Creates a new row object
var createNewRow = function(){
rowCount++;
var row = {
text: "Item" + rowCount,
cells: []
}
for (var j = 1; j <= $scope.sampleColumns.length; j++)
row.cells.push({ text: "Item" + rowCount + j });
return row;
}
// Returns the currently selected row
var getCurrentSelection = function(){
return $gridService.selectedRow($scope.gridName);
}
// Adds a new root row object at last position in the row collection
$scope.addRoot = function(){
$gridService.addRow($scope.gridName, createNewRow());
}
// Adds a new row object as child of currently selected row
$scope.addChild = function(){
$gridService.addRow($scope.gridName, createNewRow(), getCurrentSelection());
}
// Inserts a new row object as sibling and place it before the currently selected row
$scope.insertRowBefore = function(){
$gridService.insertRowBefore($scope.gridName, createNewRow(), getCurrentSelection());
}
<iui-treegrid name="{{gridName}}" rows="sampleRows"></iui-treegrid>
As it can be seen from above code, each row object contains a collection of cell objects. Depending on how many columns are present, for each column a separate cell object is created. These cell objects contain the value or text that is shown in the Tree Grid.
In next sections we will describe how to remove existing columns and rows from the TreeGrid directive .
To delete an existing column object from the grid structure, we can use one of the following built-in public methods:
Here is an example:
// Returns the currently selected column
var getSelectedColumn = function(){
return $gridService.selectedColumn($scope.gridName);
}
// Removes the currently selected column
$scope.removeColumn = function(){
$gridService.removeColumn($scope.gridName/span>, getSelectedColumn());
}
// Removes all columns
$scope.clearColumns = function(){
$gridService.clearColumns($scope.gridName);
}
To remove a row from the Tree Grid, a similar list of public method is available:
Here is an example:
// Returns the currently selected row
var getCurrentSelection = function(){
return $gridService.selectedRow($scope.gridName);
}
// Removes the currently selected row
$scope.removeRow = function(){
$gridService.removeRow($scope.gridName, getCurrentSelection());
}
// Removes a row at position 1 in row collection
$scope.removeRowAt = function(){
$gridService.removeRowAt($scope.gridName, 1);
}
// Removes all rows
$scope.clearRows = function/span>(){
$gridService.clearRows($scope.gridName);
}
The above live demonstration shows how add/remove operations are executed. Whenever a column or row is added or deleted, the layout and current view of the TreeGrid directive is updated. Full source code of the example presented in this article, is available as part of the IntegralUI Studio for Web package.