Posts Tagged Delete

Implementing delete functionality in UIGrid

Introduction

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.

Prerequisites:

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

Implementation:

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

Demo

UIGrid Updates:

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:

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

HTML

Delete Customer Method(WEBAPI)

 

, , , ,

Leave a comment