LIDOR SYSTEMS

Advanced User Interface Controls and Components

Adding New Rows Dynamically in AngularJS Grid

Created: 01 September 2015

Initially, AngularJS Grid directive is populated with data from a local or remote data source in bulk, loading the data partially or in whole at one time. However, we may also need to create dynamically one or more new rows on demand from code. In following sections we will show you how to add new rows dynamically by using an Add button which when clicked, will create a new row with input focus set to a textbox in the first cell.

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

Similar: Add and Edit Rows Dynamically in Angular TreeGrid

As demo shows, above the Grid we have three buttons: 'Add New Row' and 'Remove', which when clicked adds a new row at the root of the grid, adds a new row as child of currently selected row, and remove the currently selected row.

Each row is created dynamically, with its cells set to an empty text, and the input focus set to a textbox in first cell so that you can immediately insert its value. For this to work, in code we are creating a function that adds a new row to the grid, which by default is empty. Then we are opening the label editor so that the user can enter the cell text.

angular

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

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

// A unique identifier of the Grid directive

$scope.gridName = "gridSample";

 

// Initial set of grid columns

$scope.columns = [

{ headerText: 'Header1', width: 200 },

{ headerText: 'Header2', width: 250 },

{ headerText: 'Header3', width: 300 }

];

 

// Initial set of grid rows

$scope.rows = [

{ id: 1, text: "Item1", cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }] },

{ id: 2, text: "Item2", cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }] },

{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }] }

];

 

var rowCount = 3;

var newRow = null;

 

// Adds a new row dynamically when 'Add New Row' button is clicked

$scope.onAddRow = function(){

rowCount++;

 

newRow = {

id: rowCount,

text: "",

cells: [{ text: "" }, { text: "" }, { text: "" }]

}

 

$gridService.insertRowAt($scope.gridName, newRow, 0);

 

var delayTimer = $timeout(function(){

$gridService.openEditor($scope.gridName, newRow.cells[0]);

 

$timeout.cancel(delayTimer);

}, 100);

}

 

// Removes the currently selected row

$scope.onRemoveRow = function(){

var selRow = $gridService.selectedRow($scope.gridName);

$gridService.removeRow($scope.gridName, selRow);

}

}]);

<!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-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.treegrid.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" show-footer="false" row-removing="onRowRemoving(e)" row-removed="onRowRemoved(e)" label-edit="true" lost-focus="onLostFocus(e)" after-label-edit="onAfterLabelEdit(e)"></iui-treegrid>

</div>

</body>

</html>

/* Grid settings */

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

{

padding: 2px 2px;

}

.iui-treegrid-row-cell-content

{

padding: 2px 2px;

}

 

/* Sample settings */

.feature-content

{

width: 800px;

}

.feature-list

{

width: 300px;

}

.directive

{

width: 800px;

height: 390px;

}

.top-panel

{

background: #2455b0;

padding: 3px;

margin-bottom: 1px;

}

button

{

background: transparent;

border: thin solid transparent;

color: white;

padding: 5px 10px;

display: inline-block;

vertical-align: middle;

}

button:hover

{

background-color: #153268;

border: thin solid #0F244A;

}

.icon-add

{

background: url("../../../resources/icons-x24.png") no-repeat -48px -120px;

display: inline-block;

width: 24px;

height: 24px;

vertical-align: middle;

}

.icon-remove

{

background: url("../../../resources/icons-x24.png") no-repeat -72px -120px;

display: inline-block;

width: 24px;

height: 24px;

vertical-align: middle;

}

With label editor active, that is textbox in the first cell with input focus, we are able to dynamically set the cell text. By pressing the ENTER key, the change is confirmed and the cell text is updated. To move to other cells, we can press the LEFT or RIGHT ARROW keys, and pressing the ENTER key will show the label editor to currently focused cell.

Note While editor is active, if a click is made outside the editor or ESCAPE key is pressed, the whole add process is canceled, and the new row is removed.

var isRowEmpty = function(row){

if (row && row.cells){

var emptyCellCount = 0;

for (var j = 0; j < row.cells.length; j++){

if (row.cells[j].text == '')

emptyCellCount++;

}

 

if (emptyCellCount == row.cells.length)

return true;

}

 

return false;

}

 

$scope.onLostFocus = function(e){

if (e.edit && newRow && isRowEmpty(newRow))

$gridService.removeRow($scope.gridName, newRow);

}

After all changes are confirmed, a new row is added in the Grid. In case of our example, all new rows will appear at topmost position, but you can easily change this in the code by using a different method for adding rows.

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

When editing process is completed, the afterLabelEdit event is fired. We can handle this event and make sure the new row is set as selected.

$scope.onAfterLabelEdit = function(e){

if (e.cell && e.cell.text != ''){

var row = $gridService.findRowById($scope.gridName, e.cell.rid);

$gridService.selectedRow($scope.gridName, row);

}

}

The 'Remove' button allows you to remove a row that is selected from the Grid. This allows you to modify the data structure on demand, for example, when some row is added in wrong position.

All rows once added, can also be modified. Whenever a cell is clicked, a label editor will popup where you can change the cell text. Although the label editor is mostly used to edit the cells, you can use other kinds of editors.

The complete sample code along with other samples is available for download from here: IntegralUI Studio for Web - AngularJS.

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.