Editing entities without breaking the network tab (part 3/5)
This is the third step of our example for implementing batch editing with the Ignite UI for Angular Grid control and Web API. You may find the previous step, in which we have set up our Web API endpoints, here.
Step 3: Create an IgxGrid with editing feature enabled using the Ignite UI CLI
In this section, we use:
- npm
In this section, we will leave the Web API project aside and will focus on the client-side of our application. Brace yourself — in the next couple of minutes we will be talking Angular, we will explore the powerful Ignite UI CLI that will kick start our IgxGrid project and we will see how easy it is to set up a smooth and user-friendly UI with the Ignite UI for Angular library! The best thing about it is that you will get great results even if it is the first time you work with Angular. So, let us not waste any time and see how things go on the client-side!
Make sure you have npm installed, navigate to the directory you will be working in and open your favorite command-line shell. The first thing we need to do is to install the Ignite UI CLI npm package globally on our machine:
npm install -g igniteui-cli
This command will install the latest available version of the igniteui-cli package.
The Ignite UI CLI is a powerful tool for scaffolding projects in Angular, AngularJS, React or jQuery. You may explore its rich features set on the Wiki documentation page. What we need to know right now is that we may start the step-by-step mode of the CLI using the ig command. This mode will guide us through creating our application.
So, once you install the Ignite UI CLI, execute the following command:
ig
The first thing the CLI asks is to provide a name for our new project. Let us name it “Batch Update”. After pressing enter, we are asked to choose if we want the project to be created empty or we want to use any of the predefined project templates — a project with side navigation drawer or a project with side navigation extended with user authentication module. For our project, we select “Default side navigation” and press Enter.
On the next step, select the“Custom” theme for the project.
After selecting the theme, you would see a message that the project structure is generated. After this is done, you are prompted to choose if you are ready to complete the project creation and run the project, if you want to create a component or if you want to add a predefined scenario view. We want to use an IgxGrid in our project, so we select “Add component” option and press Enter.
In the next view, we see a list of the available groups of components. We select “Grids & Lists”. On the next step, we select “Grid”. From the available grid templates, we select “Grid Batch Editing”.
After you select this template, you would be asked to provide a name for the component. We will leave the default name — “Grid Batch Editing” (so, just press Enter to confirm the selection).
The desired template is already added to the project so at this point we may select “Complete & Run”.
The last thing, after confirming that we are ready to run our project is to select the app host port that would be used to run the application. The default value for Angular projects is port 4200 and we will not change it. After confirming the port number, the build starts and we see that the npm packages that are required are installing. This would take a while and once all the packages are installed, the project would open in your default browser.
When the application is loaded, we would see the landing page of our project. From the navigation menu on the left side of the view, select “Grid Batch Editing”. This would load theIgxGrid template.
You may play with the grid in the browser before exploring how the control is set up by looking at the code in our application’s folder.
At this point, the IgxGrid is using dummy data that is defined in the template itself. In the following step, we will update the template in order to connect the component to our Web API. We are getting closer to the moment when we will feed the Grid with the data from our database, will update this data using the UI and will send it back to the server where the updates will be processed and saved.
At this point, we are halfway through our example!
Thank you for sticking up with me while implementing a batch editing feature of the Ignite UI for Angular Grid! See you in the next publication of this series.
