AngularJS Grouping Data using NG-Grid

Grouping makes use of jQuery UI’s draggable feature and hence you’ll need to include JQuery UI into our application Download jQuery-UI using bower by typing in the following command in the terminal :

bower install jquery-ui

Include the jquery-ui library files by adding it in the app/index.html file as follows.

<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular/angular.js"></script>

Start with adding the new array called userType, in the app/scripts/controllers/subscribers.js file.

var subscribers= $scope.subscribers =[];
var names=["Betty","John","Peter","Jaden", "Shannon"];
var loyalty=[3,5,7,8,7];
var userType=["Free","Free","Premium","Premium","Premium"];
var joinDate=["3/5/10","5/5/12","5/8/11","11/6/13","10/12/10"];

Make the corresponding changes to include the userType in our add user function as follows.

$scope.addUsers =function(i){
$scope.subscribers.push({
no:i+1,
name:names[i],
userType:userType[i],
loyalty:loyalty[i],
joinDate:joinDate[i]
});
}

Also add it to the column definitions in the gridOptions settings.

$scope.gridOptions = {
data: 'subscribers',
columnDefs: [
{field:'no', displayName:'No.'},
{field:'name', displayName:'Name'},
{field:'userType', displayName:'Subscription Type'},
{field:'loyalty', displayName:'Loyalty Score'},
{field:'joinDate', displayName:'Date of Joining'}]
};

Add the following two parameters to the gridOptions in app/scripts/controllers/subscribers.js as highlighted.

$scope.gridOptions = {
data: 'subscribers',
showGroupPanel: true,
jqueryUIDraggable: true,
columnDefs: [
{field:'no', displayName:'No.'},
{field:'name', displayName:'Name'},
{field:'userType', displayName:'Subscription Type'},
{field:'loyalty', displayName:'Loyalty Score'},
{field:'joinDate', displayName:'Date of Joining'}]
};

Save the file and refresh the subscriptions view in your browser.

Updates