How to Make AngularJS UI-Grid Editable

The AngularJS UI-Grid provides simple, easy to use features to make the grid cells editable. You can choose which columns of the UI Grid should be editable and which are not editable, or add a dropdown editor to a particular UI Grid column and more. Here in this post I’ll show you how to make AngularJS UI-Grid editable and explain some of its features.

See this demo

First I’ll add the UI-Grid to my web page and populate the grid with some data (JSON).

The JSON Data

Create a file name sample.json. Copy the data into the file and save it.

[
  	{
    "ID": "001",
   "Name": "Eurasian Collared-Dove",
    "Type": "Dove",
    "Scientific Name": "Streptopelia"
},
	{
    "ID": "002",
    "Name": "Bald Eagle",
    "Type": "Hawk",
    "Scientific Name": "Haliaeetus leucocephalus" 
},
	{
    "ID": "003",
    "Name": "Cooper's Hawk",
    "Type": "Hawk",
    "Scientific Name": "Accipiter cooperii"  
},
	{
    "ID": "004",
    "Name": "Bell's Sparrow",
    "Type": "Sparrow",
    "Scientific Name": "Artemisiospiza belli"  
},
	{
    "ID": "005",
    "Name": "Mourning Dove",
    "Type": "Dove",
    "Scientific Name": "Zenaida macroura"  
},
	{
    "ID": "006",
    "Name": "Rock Pigeon",
    "Type": "Dove",
    "Scientific Name": "Columba livia"  
},
	{
    "ID": "007",
    "Name": "Abert's Towhee",
    "Type": "Sparrow",
    "Scientific Name": "Melozone aberti"  
},
	{
    "ID": "008",
    "Name": "Brewer's Sparrow",
    "Type": "Sparrow",
    "Scientific Name": "Spizella breweri"  
}
]

The Markup

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.6.3/ui-grid.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.6.3/ui-grid.min.css" type="text/css">
   
    <style>
        .uiGrd {
            width: 700px;
            height: 250px;
        }
    </style>
</head>
<body>
    <div ng-app="myApp" 
        ng-controller="myController">

        <div class="uiGrd" id="grd"
            ui-grid="gridOptions" 
            ui-grid-edit 
            ui-grid-cellnav>
        </div>
    </div>
</body>

The <div> element in the above markup with the id grd is the element that will transform into a grid. The element has three directives.

• ui-grid: This directive is used to specify the data, along with some options provided to the grid.

• ui-grid-edit: Including this directive to the element will make the grid editable. However, you will also need to add a module named ui.grid.edit in your controller. (See the controller script below)

• ui-grid-cellnav: This directive is optional in this example. However, it is important, since it will prominently highlight the cell you are editing. You’ll will also have to add a module named ui.grid.cellnav in the controller.

We are now done with our directives. Now lets create our controller.

The Controller (Script)

<script>
     var app = angular.module('myApp', ['ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);
     app.controller('myController', function ($scope, $http) {

         $scope.gridOptions = {};

         // REQUEST JSON DATA FROM FILE.
         var request = {
             method: 'get',
             url: 'sample.json',
             dataType: 'json',
             contentType: "application/json"
         };

         $http(request)
            .success(function (jsonData) {
                $scope.gridOptions.data = jsonData;     // BIND JSON TO GRID.
            })
            .error(function () { });
     });
</script>
</html>

See the modules that I have added. Next, I am making a GET request using AngularJS $http service to our JSON file that we have created in the beginning. If successful, we’ll bind the data to our UI-Grid control.

Your editable UI-Grid is ready.

There are three simple ways to invoke editing.

1) Set focus on the cell you want to edit and start typing. Press Enter key to confirm the changes.

2) Set focus on the cell and press F2 key. It will show a textbox where you can type any value. Once you’re done typing, press the Enter key and it will change or update the previous value in the cell with new a value from the text editor (or textbox).

Press the Esc (escape) key to hide the editor textbox and it will not change the cell value.

3) You can also double-click a cell to invoke editing. Type some values in the editor and click anywhere on the web page to update the changes in the cell.

Unlike other JavaScript Grids that use a single click to invoke the editor, double-clicking a cell to show the text editor makes more sense.

UI-Grid Edit Options

If you saw the above demo page or the JSON data, I have a field named ID. I do not want my users to edit ids. Since each id is unique for each data row. You can define restrictions to each column in the grid. Add the below script before the $http service.

$scope.gridOptions.columnDefs = [
    { name: 'ID', enableCellEdit: false, width: '10%' },
    { name: 'Name', enableCellEdit: true, width: '30%' },
    { name: 'Type', enableCellEdit: true },
    { name: 'Scientific Name', enableCellEdit: true, width: '40%' }
];

See this demo

I have defined three options for the columns. Check the second option enableCellEdit. It’s a Boolean value, true to enable editing and false to disable editing.

The first option is the name against which the options are defined. You can change the default name to a name of your choice. For example, I want to change Scientific Name to SN, I’ll do this …

{ name: 'Scientific Name', displayName: 'SN', enableCellEdit: true, width: '20%' }

Note: Be careful with the options. These are case sensitive.

The last or the third option is the width. Depending upon the length of the text, you can define the column width.

Add a Dropdown Editor to the UI-Grid Column

Sometimes you’ll need a dropdown list or editor in one or two columns in the grid. Usually a dropdown will have a list of predefined values that your users can choose. So lets add a dropdown editor to our UI-Grid.

Again, check the JSON data. There is a field called Type (type of birds). I do not want my users to enter some value, which is not a bird type. Therefore, I’ll give them a dropdown list with values to choose.

How many bird types do you see the JSON data file? Ok, we got three distinct type of birds. I can define a $scope property (an array) with the list.

$scope.birdType = [
    { Type: 'Dove' },
    { Type: 'Hawk' },
    { Type: 'Sparrow' }
];

You will also have to make slight changes in the columnDefs property. Since we’ll have to map the column with the $scope property for the dropdown editor.

$scope.gridOptions.columnDefs = [
    { name: 'ID', enableCellEdit: false, width: '10%' },
    { name: 'Name', enableCellEdit: true, width: '30%' },
    { name: 'Type', enableCellEdit: true,
        editableCellTemplate: 'ui-grid/dropdownEditor',
        editDropdownOptionsArray: $scope.birdType,
        editDropdownIdLabel: 'Type',
        editDropdownValueLabel: 'Type'
    },
    { name: 'Scientific Name', enableCellEdit: true, width: '40%' }
];

See this demo

I have defined four other options to the field named Type.

• editableCellTemplate: Setting this option with the value ui-grid/dropdownEditor, makes the dropdown editor available to the column.

• editDropdownOptionsArray: Now we need some options to be filled in the dropdown. This property needs an array of data. Therefore, I have set the $scope.birdType property to this option.

• editDropdownIdLabel: This property needs an id from the options. However, since I have hardcoded the options (in $scope.birdType), there is no id. I only have only one field, the Type. Therefore, I have set the type as value to this option.

Note: The default format is: {id: 001, value: 'Dove'}. This makes sense. If you have master data, you might have a unique id for each value.

• editDropdownValueLabel: The value that will be shown in the dropdown and in the cell of the UI-Grid after selection

← PreviousNext →