In this post, I’ll incorporate the ability to sort the grid based on either the last name or the first name.

First, modify the API GetStudents method to be as follows

   public StudentsContainer GetStudents(int currentPage, int recordsPerPage, string sortKey, string sortOrder)
        {

            var pageNumber = currentPage;
            var pageSize = recordsPerPage;
            var begin = (pageNumber - 1) * pageSize;

            var totalNumberOfRecords = db.Students.Count();
            List<Student> results = null;
            switch (sortOrder)
            {
                case "ASC":
                    switch (sortKey)
                    {
                        case "lastName":
                            results = db.Students.OrderBy(r => r.LastName).Skip(begin).Take(pageSize).ToList();
                            break;
                        case "firstName":
                            results = db.Students.OrderBy(r => r.FirstMidName).Skip(begin).Take(pageSize).ToList();  
                            break;
                    }
                    break;
                case "DESC":
                    switch (sortKey)
                    {
                        case "lastName":
                            results = db.Students.OrderByDescending(r => r.LastName).Skip(begin).Take(pageSize).ToList();
                            break;
                        case "firstName":
                            results = db.Students.OrderByDescending(r => r.FirstMidName).Skip(begin).Take(pageSize).ToList();
                            break;
                    }
                    break; ;
            }

            

            var students =
                results.Select(
                    r =>
                        new Student
                        {
                            EnrollmentDate = r.EnrollmentDate,
                            FirstMidName = r.FirstMidName,
                            LastName = r.LastName,
                            ID = r.ID
                        }).ToList();

            var studentsContainer = new StudentsContainer { Students = students, RecordCount = totalNumberOfRecords };

            return studentsContainer;
        }

Next, modify the student controller to look as follows

.controller("studentCtrl", ["$scope", "dataService", "localStorageService",
        function ($scope, dataService, localStorageService) {
            
            $scope.data = dataService.students;

            var sortKeyOrder = {
                key: '',
                order: '',
            };
            
            $scope.totalItems = 0;
            $scope.currentPage = 1;
            $scope.maxSize = 5;
            $scope.recordsPerPage = 5;
            $scope.numberOfPageButtons = 5;
          

            getData($scope, dataService, localStorageService);

            $scope.sort = function (col) {

                sortKeyOrder = localStorageService.get('sortKeyOrder');

                if (sortKeyOrder !== null && sortKeyOrder.key === col) {

                    if (sortKeyOrder.order == 'ASC')
                        sortKeyOrder.order = 'DESC';
                    else
                        sortKeyOrder.order = 'ASC';

                    localStorageService.set('sortKeyOrder', sortKeyOrder);

                } else {
                    
                    sortKeyOrder = {
                        key: col,
                        order: 'ASC',
                    };
                    
                    localStorageService.set('sortKeyOrder', sortKeyOrder);

                }
            };

            $scope.pageChanged = function () {

                getData($scope, dataService, localStorageService);
            };


        }]);

In line 1, localStorageService is being injected as a dependency & then in line 18 a new sort function has been added. Also in line 18 the getData function has an additional localStorageService param.

Modify the getData function to look as follows

var getData = function ($scope, dataService, localStorageService) {


    var sortKeyOrder = localStorageService.get('sortKeyOrder');

    if (sortKeyOrder == null) {
        sortKeyOrder = {
            key: 'lastName',
            order: 'ASC',
        };
    }
    
    $scope.sortKeyOrder = sortKeyOrder;

    var options = {
        
        currentPage: $scope.currentPage,
        recordsPerPage: $scope.recordsPerPage,
        sortKeyOrder: sortKeyOrder,
    };


    dataService.getStudents(options)
    .then(function (totalItems) {

        $scope.totalItems = totalItems;
    },
    function () {

        alert("an error occured: unable to get data");
    });

};


Modify the students.tpl.html to look as follows

<div class="row top-buffer">
  <table class="table table-bordered table-striped table-responsive">
    <thead>
      <tr>
        <th>
        </th>
        <th>
        </th>
        <th>
        </th>

        <th>
          <a href="#" ng-click="sort('lastName')" target="_self">Last Name</a>
          <i ng-class="{'glyphicon glyphicon-chevron-up':sortKeyOrder.order=='ASC' && sortKeyOrder.key=='lastName'}"></i>
          <i ng-class="{'glyphicon glyphicon-chevron-down':sortKeyOrder.order=='DESC' && sortKeyOrder.key=='lastName'}"></i>

        </th>
        <th>
          <a href="#" ng-click="sort('firstName')" target="_self">First Name</a>
          <i ng-class="{'glyphicon glyphicon-chevron-up':sortKeyOrder.order=='ASC' && sortKeyOrder.key=='firstName'}"></i>
          <i ng-class="{'glyphicon glyphicon-chevron-down':sortKeyOrder.order=='DESC' && sortKeyOrder.key=='firstName'}"></i>
        </th>
        <th>
          Date of Enrollment
        </th>

      </tr>
    </thead>
    <tbody data-ng-repeat="i in data">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <textarea class="form-control" style="width: 300px;height: 65px" ng-model="i.lastName"></textarea>
        </td>
        <td>
          <textarea class="form-control" style="width: 300px;height: 65px" ng-model="i.firstMidName"></textarea>
        </td>
        <td>
          <input type="text" class="form-control" style="width: 150px;height: 65px" ng-model="i.enrollmentDate" />
        </td>
      </tr>

    </tbody>
  </table>

  <span data-pagination data-total-items="totalItems" data-ng-model="currentPage" data-max-size="numberOfPageButtons" class=" pagination-sm" data-boundary-links="true" data-rotate="false" data-ng-change="pageChanged()" data-items-per-page="recordsPerPage"></span>


</div>

In the next post I’ll implement the ability to search based on first name or last name.

As always the code is here and you can view the changes I made in this post by looking at this commit.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s