Posts Tagged Insert

Insert functionality in UIGrid


This is a continuation of my previous articles in which I demonstrated the procedure to

In this article I will demonstrate how to implement Add new record functionality in Angular UIGrid.


I have used icons from FontAwesome Library, which is a great source for multiple icons. You can download Fontawesome icons from here.

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 Adding new record in UIGrid.

You can see a sample Demo of entire functionality below.


UIGrid Updates

We will add a new button on page which responds to click event and open a modal pop up window. Users can enter the details and on save button click we will save the data to database.

AddCustomer function:

AddCustomer function will take the scope object as input which contains all values as provided by user and then save the data to database. User will also see an alert stating the status of insert operation.

Updated Angular code with Insert new Record functionality

Modal Pop up HTML

WEBAPI AddCustomer Method

You can find complete source code of this demo from github


, , , , , , ,

Leave a comment