The goal of this post is to extend the AngularJS CRUD Grid that we created in previous posts:
We will add now the following requirements:
- # 1 Filter items.
- # 2 Custom buttons: This will allow us to add button columns that will call the parent controller with the id of the button clicked and the associated item as parameter.
Code is available on github: https://github.com/softwarejc/angularjs-crudgrid. Feel free to play with it, find errors and write improvements.
You can see a live demo here: AngularJS CRUD Grid III demo.
Items containing the letter ‘c’
Button click, callback that shows a popup:
The goal of this post is to write a single page application (SPA) to display a list of items inside a grid. This grid shall not only display a list of items but also allows all the CRUD operations: Create a new item and Read, Update and Delete for the contained items.
- Show a notification when a server request success or fail.
- Editing an item: Start editing with a double click and commit the edition with “Enter”.
- Everything shall be executed without refreshing the web page
- The complete list of items should only be requested one when the page is loaded.
Code is available on github: https://github.com/softwarejc/angularjs-crudgrid. Feel free to play with it, find errors and write improvements. You can see a live demo here: AngularJS CRUD Grid III demo.
This is a screenshot of the AngularJS Crud Grid that we are going to implement:
Let’s get our hands dirty, we will cover the following points:
- Domain: Entity Framework + Domain Services
- Server side: WebAPI + ViewModels
- Client side: AngularJS + Bootstrap + Toastr
- What’s next?