AngularJS ng-grid Spring MVC example

AngularJS ng-grid Spring MVC example

Many component are available to show large data set in table or grid some component are below:

  • AngularUI Boostrap : Compatible with AngularJS
  • Bootstrap CSS 3
  • ng-grid Compatible with AngularJS

The ng-grid very suitable to show large data set in scrollable grid and if you have got thousands of data entries you can go for ng-grid pagination. In this demo we will see how to use ng-grid with AngularJS to show data’s in scrollable grid using Spring MVC framework. We will create sample page with select drop down box and based on user selection call will go to the server and render response back to ng-grid. Please see steps below:

  • Create maven project name: SpringMVCAngularJSService
  • Final project structure:

AngularJS ng-grid Spring MVC example

  • pom.xml:

  • web.xml:

  • dispatcher-servlet.xml:

  • angularJSngGrid.jsp:

  • SpringMVCController.java:

  • Lets run this application now (We are using tomcat server with eclipse to run this if you are not sure how to configure and run tomcat with eclipse please follow this tutorial). To run: Right click project –> Run As –> Run on Server where you will see below page:

AngularJS ng-grid Spring MVC example

  • For this demo: form the drop down box select active team “Prime Equity” (You could choose any value). You will see below sample data populated in ng-grid:

AngularJS ng-grid Spring MVC example

ng-grid provide so many in-build functionality some of them have been implemented shown below: 

  • Filter column and show remove column:

AngularJS ng-grid Spring MVC example

  • Drag drop column and sorting:

AngularJS ng-grid Spring MVC example

  • That’s it. If you want to try more functionality of ng-grid please download project in bottom download link and read ng-grid tutorial here 

download Download Project: SpringMVCAngularJSnggrid

5 thoughts on “AngularJS ng-grid Spring MVC example

    • Thanks Vaquar appreciate your feedback. This tutorial is compatible with that version and may not work properly with latest version. We would like to keep version as it is. We will write another tutorial using new version of both AngularJS and JQuery.

  1. Thanks for the sample.
    I tried this to run this example — the grid is not being populated with data. I am using java 8 and tomact 9.x
    Miya.

  2. Thanks,but i am facing an issue under pom.xml and on building the project below error appears:

    Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin:2.5 or one of its dependencies could not be resolved: Failed to read artifact descriptor for org.apache.maven.plugins:maven-resources-plugin:jar:2.5
    Plugin org.apache.maven.plugins:maven-resources-plugin:2.5 or one of its dependencies could not be resolved: Failed to read artifact descriptor for org.apache.maven.plugins:maven-resources-plugin:jar:2.5

Leave a Reply

Your email address will not be published. Required fields are marked *