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.
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 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