LIDOR SYSTEMS

Advanced User Interface Controls and Components

InCell Editing in AngularJS Grid using Custom Editor Template

Created: 03 September 2015

Most of the time cells in AngularJS Grid directive are edited using the default label editor. Whenever a cell is clicked, an edit box appears where you can edit the cell text. This is built-in functionality, which you can override by creating your own editor using custom editor template. In this article, we will show you how to enable incell editing, by creating a custom editor and place it inside a grid cell.

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

Create Editor Template for Grid Cells

At first, we need to create the editor template. We will use simple elements, one input element and two buttons, placed in single line. The template looks like this:

<script class= type="text/ng-template" id="celleditor.html">

<div class="cell-editor" ng-model="editCell">

<input class= ng-model="editBox.text" iui-focus="editorFocus" onfocus="this.select()" tabindex="91" ng-keydown="onEditKeyDown($event)" />

<button class= ng-click="onOk(editCell)" tabindex="92">Ok</button>

<button class= ng-click="onCancel(editCell)" tabindex="93">Cancel</button>

</div>

</script>

/* Inline Editor Template */

.cell-editor

{

background: white;

overflow: hidden;

}

.cell-editor:before

{

content: "";

display: inline-block;

vertical-align: middle;

height: 100%;

}

input

{

display: inline-block;

vertical-align: middle;

width: 200px;

}

button

{

background: #2455b0;

border: thin solid #1e4691;

color: white;

padding: 2px 5px;

display: inline-block;

vertical-align: middle;

}

We are using the <div> tag to create a panel that will hold the editing elements. In order for all elements to appear inline, we will use the inline-block style attribute. Furthermore, the appearance of buttons is changed using custom CSS styles, to better match the current theme of the Grid.

Related: AngularJS Grid with Custom DropDown Editor

Next, we need apply this template to a grid column which cells will be edited. The column object of Grid directive has several fields that allow you to set parameters for the editor we are going to use:

  • editorType - determines what kind of editor we are going to use
  • editorSettings - an object which holds the properties of built-in editors
  • editorTemplate - holds a link to a template used as an editor

Note The second column in our Grid above uses the built-in checkbox editor. More information is available here: How to Add CheckBox Column in AngularJS Grid.

In our case, because we want to display a custom editor inside the grid cell space, editorType will be set to 'incell' value and editorTemplate will contain the name of the template we have previously created.

// Settings for editor template in first column

$scope.columns = [

{

id: 1,

headerText: "Title",

editorType: 'incell',

editorTemplate: "'celleditor.html'",

width: 400

}

];

Finally, to enable editing of the grid cells, the allowEdit field value of each cell needs to be set to true. By default, whenever there is an editor applied to a column, each cells that belon to that column are editable. If you want to prevent some cells from editing, you can simple set this field value to false. In our example, all root rows (movie categories), are non-editable.

To see all this in action, just hover over cells in first column, this will show an edit icon, stating that cell is editable. By clicking on a cell, the cell content will change displaying a user interface based on our previously created template, with information related to that cell. In our case, the input element will show the cell text.

Editor pops out because, if editor template is applied to a specific column, whenever cell is clicked and it is editable, the editor will appear. In code this is handled by calling the openEditor method.

Note The editor can also appear by pressing the ENTER key, when cell has the input focus.

Typing into the edit box, and clicking the OK button, will confirm the change of the cell text and value. On the other hand, clicking on the Cancel button, will discard any change to the cell. The same will happen also if ESCAPE key is pressed, or a click is made outside the editor.

But how clicking on the Ok button, confirms the changes to the cell value, you may ask? Our template uses the ng-model directive to link the cell with the template. So that whenever a cell is clicked this link is updated and also elements in the template update their value based on the cell value.

<script type="text/ng-template" id="celleditor.html">

This cell object is added as argument to the click event of the OK button. Whenever this button is clicked, we know which cell needs to update its value:

To close the editor and return back to normal the appearance of edited cell, we are using the closeEditor method:

// Whenever the OK button is clicked, confirm changes in the editor

$scope.onOk = function(cell){

confirmEdit(cell);

}

 

// Apply the editing changes to the grid cell

var confirmEdit = function(cell){

if (cell)

cell.text = $scope.editBox.text;

 

$gridService.closeEditor($scope.gridName, $scope.editCell);

}

How to Handle Edit Events

Editing process in Grid directive for AngularJS is accompanied by two events:

  • beforeEdit - occurs in beginning of editing when editor is first shown
  • afterEdit - occurs after edit is completed or canceled and editor is closed

To handle these events, at first you need to apply a function to the event attribute in HTML specification:

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" before-edit="onBeforeEdit(e)" after-edit="onAfterEdit(e)"></iui-treegrid>

We can use these events to further enhance the edit process, for example we can set conditions which will determine whether a cell value is editable or not. If a condition is met, we can cancel the edit process and close the editor. For purpose we will handle the beforeEdit event, like this:

// Handle the beforeEdit event to set the editing cell for editor template

$scope.onBeforeEdit = function(e){

if (e.cell){

$scope.editCell = e.cell;

$scope.editBox.text = e.cell.text;

$scope.editorFocus.active = true;

}

}

 

// Reset the editing cell to null

$scope.onAfterEdit = function(e){

$scope.editCell = null;

$scope.editorFocus.active = false;

}

The end result is shown in above demo. Complete source code of this sample is included in IntegralUI Studio for Web, which is downloadable from here.

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.