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.

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.

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

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.

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.

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:

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.