LIDOR SYSTEMS

Advanced User Interface Controls and Components

Dynamically Add or Remove Columns and Rows in Tree Grid for AngularJS

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.

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









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.

How to Add a New Column to the AngularJS Tree Grid

To add a new column to the Tree Grid, there are several methods to choose from:

  • addColumn – Adds the specified column at the end of column collection
  • insertColumnAt – Inserts the specified column at specified position in column collection
  • insertColumnAfter – Inserts the specified column as a sibling at position after the target column
  • insertColumnBefore – Insert the specified column as a sibling at position before the target column

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>

How to Add a New Row to the AngularJS Tree Grid

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:

  • addRow – Adds the specified row at the end of row collection
  • insertRowAt – Inserts the specified row at specified position in row collection
  • insertRowAfter – Inserts the specified row as a sibling at position after the target row
  • insertRowBefore – Insert the specified row as a sibling at position before the target row

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 .

Remove a Column from the AngularJS Tree Grid

To delete an existing column object from the grid structure, we can use one of the following built-in public methods:

  • removeColumn – Removes a specified column from column collection
  • removeColumnAt – Removes a column which is located at specified index in column collection
  • clearColumns – Removes all columns from the column collection

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);

}

Remove a Row from the AngularJS Tree Grid

To remove a row from the Tree Grid, a similar list of public method is available:

  • removeRow – Removes a specified row from row collection
  • removeRowAt – Removes a row which is located at specified index in row collection
  • clearRows – Removes all row from the row collection

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.

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.