This is continuation to my previous two articles in which I demonstrated the steps to
In this article I am going to demonstrate how to implement row delete functionality in UIGrid. The series will contain continuation articles to cover the topic in detail.
I have used icons from FontAwesome Library, which is a great source for icons. You can download Fontawesome icons from here.
Also to display message after every operation we used UIBootstrap
You would already have the Model configured by following my previous article on loading UIGrid with data. We will directly look into the details of deleting records in UIGrid.
Sample Demo of Delete functionality is given below
We will update cellTemplate in “Actions” column to add Delete button. We will reuse the editRow flag to hide and display delete buttons. To delete the record,, we call deleteRow function from Delete button
Delete function will take the selected row object as input parameter; we will find the rowindex using input parameter. Using row index we will find CustomerID of selected row and delete the record. Additionally before deleting the record we will ask for user confirmation. Finally we will call the DeleteCustomer method in Factory service to delete the record in database.
Updated Angular code with Delete functionality
Delete Customer Method(WEBAPI)