I'm writing an AngularJS front end for a remote REST Endpoint. I'd like to show the data from the REST Service using the UI Grid library. So far I have been able to display and add new content. However, I'm not able to make the Grid Editable and cannot see what is wrong with my code. Here is the HTML page I'm using:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.10.0/ui-grid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.10.0/ui-grid.min.css" type="text/css" />
</head>
<body>
<div ng-controller="CustomerController">
<div>
<input type="text" ng-model="newName" placeholder="Name">
<input type="text" ng-model="newSurname" placeholder="Surname">
<button class="btn btn-primary" ng-click="addCustomer()">Add Customer</button>
</div>
<div ui-grid="gridOptions" class="grid"></div>
</div>
<script>
// Define your AngularJS app module
var app = angular.module('myApp', ['ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);
// Create a controller for the customer data
app.controller('CustomerController', function($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ name: 'id', displayName: 'ID', enableCellEdit: false },
{ name: 'name', displayName: 'Name', enableCellEdit: true },
{ name: 'surname', displayName: 'Surname', enableCellEdit: true },
{
name: 'actions',
displayName: 'Actions',
cellTemplate:
'<div class="ui-grid-cell-contents">' +
' <button class="btn btn-primary btn-xs" ng-click="grid.appScope.updateCustomer(row)">Update</button>' +
' <button class="btn btn-danger btn-xs" ng-click="grid.appScope.deleteCustomer(row.entity.id)">Delete</button>' +
'</div>'
}
],
enableGridMenu: true,
enableSorting: true,
enableFiltering: true,
enableCellEditOnFocus: true,
enableCellEdit: true,
enableRowSelection: false,
enableRowHeaderSelection: false,
multiSelect: false
};
// Fetch customer data from the REST service
$http.get('rest/customers')
.then(function(response) {
$scope.gridOptions.data = response.data;
})
.catch(function(error) {
console.error('Error retrieving customer data:', error);
});
// Function to add a new customer
$scope.addCustomer = function() {
var newCustomer = {
name: $scope.newName,
surname: $scope.newSurname
};
$http.post('rest/customers', newCustomer)
.then(function(response) {
$scope.gridOptions.data.push(response.data);
$scope.newName = '';
$scope.newSurname = '';
})
.catch(function(error) {
console.error('Error adding customer:', error);
});
};
// Function to update a customer
$scope.updateCustomer = function(row) {
var updatedCustomer = {
id: row.entity.id,
name: row.entity.name,
surname: row.entity.surname
};
$http.put('rest/customers', updatedCustomer)
.then(function() {
// Handle successful update if needed
})
.catch(function(error) {
console.error('Error updating customer:', error);
});
};
// Function to delete a customer
$scope.deleteCustomer = function(customerId) {
$http.delete('rest/customers?id=' + customerId)
.then(function() {
var index = $scope.gridOptions.data.findIndex(function(customer) {
return customer.id === customerId;
});
if (index !== -1) {
$scope.gridOptions.data.splice(index, 1);
}
})
.catch(function(error) {
console.error('Error deleting customer:', error);
});
};
});
</script>
</body>
</html>
Overall the updateCustomer invokes correctly the REST Endpoint with a PUT Request when I hit the Update button. Just it sends the existing row as I'm not able to make the Name and Surname cells editable. Any help?