In this article we will show how to use the ng-grid component (based on AngularJS and jQuery) to display an editable grid. The purpose of this example will be to demonstrate how to perform updates on the server of the fields that have been modified.
The server side of this article has been already introduced by Develop a REST application using WildFly and AngularJS. Basically the server side has been engineered as a JAX-RS + JPA application which is able to return a list of Person objects using JSON. We have just added another field to the Person class named “address” which will be editable in our grid:
@Entity
public class Person {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Long id;
private String name;
private String surname;
private String address;
// Getter - setters fields
}
The JAX-RS Web service now includes also another method which consumes a POST request and saves the Person Entity using JPA:
@Stateless
@Path("/simple")
public class SimpleRESTService {
@PersistenceContext
EntityManager em;
@GET
@Produces(MediaType.APPLICATION_JSON)
public List<Person> getPersonList()
{
Query query = em.createQuery("FROM Person");
List<Person> customerList = query.getResultList();
return customerList;
}
@POST
@Consumes(MediaType.APPLICATION_JSON)
public void save(String message) {
JsonReader reader = Json.createReader(new StringReader(message));
JsonObject obj = reader.readObject();
String name = obj.getString("name");
String surname = obj.getString("surname");
String address = obj.getString("address");
Query query = em.createQuery("FROM Person where name = :name and surname = :surname");
query.setParameter("name", name);
query.setParameter("surname", surname);
Person person = (Person) query.getSingleResult();
person.setAddress(address);
em.persist(person);
}
}
The most interesting part, is into the save method which uses JSON API to parse the POST request which is received in JSON format. For example.
{"name":"freddie","surname":"smith","address":"New Address"}
Once extracted the field, the Person object is queried and update accordingly using JPA.
Done with the server side, we will see how to create the User Interface with AngularJS. (We suggest you to have a look at our first ng-grid tutorial so that you already know a bit about ng-grid).
<!doctype html>
<html ng-app="myApp">
<head>
<title>Hello REST AngularJS</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>
<script language="javascript">
var app = angular.module('myApp', ['ngGrid']);
function MyCtrl($scope, $http) {
$http.get('http://localhost:8080/rest-angular/rest/simple').
success(function(data) {
$scope.users = data;
});
$scope.saveItem = function(name,surname,address) {
$http.post('http://localhost:8080/rest-angular/rest/simple',{name: name,surname: surname,address: address}).
success(function(data) {
alert('update completed!');
});
}
$scope.gridOptions = {
data: 'users',
enableRowSelection: false,
enableCellEditOnFocus: true,
multiSelect: false,
columnDefs: [
{ field: 'name', displayName: 'name', enableCellEdit: false } ,
{ field: 'surname', displayName: 'surname', enableCellEdit: false} ,
{ field: 'address', displayName: 'address', enableCellEdit: true} ,
{ field:'', displayName: 'Save', enableCellEdit: false,
cellTemplate: '<button id="editBtn" type="button" ng-click="saveItem(row.entity.name, row.entity.surname,row.entity.address)" >Save</button>'}
]
};
}
</script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
And here is how the grid should appear with some dummy data loaded on the server side:
So basically our controller loads that using a REST get which returns an Array of Person. The data is inserted into the gridOptions field, specifying the column label and which field are editable. The only editable field in this example is the address field. In order to edit just click on it:
Most interesting for us is the last field of the grid which defines a cell template:
{ field:'', displayName: 'Save', enableCellEdit: false, cellTemplate: '<button id="editBtn" type="button" ng-click="saveItem(row.entity.name, row.entity.surname,row.entity.address)" >Save</button>'}
This will add a column label named “Save” and a button which, when clicked (ng-click directive) invokes the saveItem function, passing as argument the row fields. Within the saveItem function we are performing a POST to our Webservice passing the JSON row which has been updated.
Stay tuned for more AngularJS updates!
