diff --git a/src/app/data/bus-stop/bus-stop.component.html b/src/app/data/bus-stop/bus-stop.component.html
index dad08a5..7db449a 100644
--- a/src/app/data/bus-stop/bus-stop.component.html
+++ b/src/app/data/bus-stop/bus-stop.component.html
@@ -2,11 +2,11 @@
     <ag-grid-ng2 #agGrid style="width: 100%; height: 100%;" class="ag-blue" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups
         toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple" (cellClicked)="onCellClicked($event)" (cellDoubleClicked)="onCellDoubleClicked($event)" (cellContextMenu)="onCellContextMenu($event)" (cellValueChanged)="onCellValueChanged($event)"
         (cellFocused)="onCellFocused($event)" (rowSelected)="onRowSelected($event)" (selectionChanged)="onSelectionChanged()" (beforeFilterChanged)="onBeforeFilterChanged()" (afterFilterChanged)="onAfterFilterChanged()" (filterModified)="onFilterModified()"
-        (beforeSortChanged)="onBeforeSortChanged()" (afterSortChanged)="onAfterSortChanged()" (virtualRowRemoved)="onVirtualRowRemoved($event)" (rowClicked)="onRowClicked($event)">
+        (beforeSortChanged)="onBeforeSortChanged()" (afterSortChanged)="onAfterSortChanged($event)" (virtualRowRemoved)="onVirtualRowRemoved($event)" (rowClicked)="onRowClicked($event)">
     </ag-grid-ng2>
     <div class="control_button">
         <div *tdLoading="'loading'; mode:'indeterminate'; type:'circle'; strategy:'replace'; color:'accent'"></div>
-        <button md-fab color="accent" (click)="addNewRow()" type="button"><md-icon>add</md-icon></button>
-        <button md-fab color="warn" (click)="deleteRows()" type="button"><md-icon>delete</md-icon></button>
+        <button md-fab color="accent" [disabled]="isNew || isSelected" (click)="addNewRow()" type="button"><md-icon>add</md-icon></button>
+        <button md-fab color="warn" [disabled]="!isSelected" (click)="deleteRows()" type="button"><md-icon>delete</md-icon></button>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/data/bus-stop/bus-stop.component.ts b/src/app/data/bus-stop/bus-stop.component.ts
index 4b35229..17d7837 100644
--- a/src/app/data/bus-stop/bus-stop.component.ts
+++ b/src/app/data/bus-stop/bus-stop.component.ts
@@ -1,6 +1,6 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, AfterViewInit } from '@angular/core';
 import { TdLoadingService } from '@covalent/core';
-import { GridOptions } from 'ag-grid/main';
+import { GridOptions, IGetRowsParams, IRowModel } from 'ag-grid/main';
 
 import { BusStopService } from '../../../services/bus-stop.service';
 import { BusStop } from '../../../models/bus-stop';
@@ -26,12 +26,11 @@ import { routerTransition } from '../../../animations/router.animation';
     styleUrls: ['bus-stop.scss'],
     encapsulation: ViewEncapsulation.None,
 })
-export class BusStopComponent {
+export class BusStopComponent implements AfterViewInit {
 
     private columnDefs: any[];
     private gridOptions: GridOptions;
     public showGrid: boolean;
-    public rowData: any[];
     public rowCount: string;
     public regions: RegionSelectList[];
     public states: StateCommonSelectList[];
@@ -41,7 +40,8 @@ export class BusStopComponent {
     public boolean: BooleanSelectList[];
     public isLoading: boolean = false;
     public isBootstrapping: boolean = true;
-    public isSelected: boolean = true;
+    public isSelected: boolean = false;
+    public isNew: boolean = false;
 
     constructor(
         protected service: BusStopService,
@@ -51,6 +51,8 @@ export class BusStopComponent {
     ) {
         this.gridOptions = <GridOptions>{};
         this.gridOptions.enableSorting = true;
+        this.gridOptions.suppressMultiSort = true;
+        this.gridOptions.enableServerSideSorting = true;
         this.showGrid = true;
         this.gridOptions.rowModelType = 'virtual';
         this.booleanService.getModels().then((models) => this.boolean = models);
@@ -64,33 +66,31 @@ export class BusStopComponent {
             this.createColumnDefs();
             this.isBootstrapping = false;
       });
-        this.service.getData().then((data) => {
-          if (data.length){
-            this.rowData = data;
-          } else {
-            this.rowData = [new BusStop()];
-          }
-      }).then(() => {
-          this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
-          this.gridOptions.api.refreshVirtualPageCache();
-      });
     }
-    setRowData(allOfTheData) {
+
+    ngAfterViewInit() {
+        this.gridOptions.api.setDatasource(this.setRowData());
+    }
+
+    setRowData(): any {
       // tslint:disable-next-line:typedef
       let dataSource = {
           rowCount: null, // behave as infinite scroll
-          getRows: function (params) {
-              // At this point in your code, you would call the server, using $http if in AngularJS.
-              // To make the demo look real, wait for 500ms before returning
-              // take a slice of the total rows
-              let rowsThisPage = allOfTheData.slice(params.startRow, params.endRow);
-              // if on or after the last page, work out the last row.
-              let lastRow = -1;
-              if (allOfTheData.length <= params.endRow) {
-                  lastRow = allOfTheData.length;
+          getRows: (params: IGetRowsParams) => {
+              let sort = null;
+              if (params.sortModel.length) {
+                  sort = this.parseSort(params.sortModel[0]);
               }
-              // call the success callback
-              params.successCallback(rowsThisPage, lastRow);
+              this.service.getData(params.startRow, params.endRow, sort).then((data) => {
+                  if (!data.length) {
+                      data = [new BusStop()];
+                  }
+                  let lastRow = -1;
+                  if (data.length <= params.endRow) {
+                      lastRow = data.length;
+                  }
+                  params.successCallback(data, lastRow);
+              });
           },
       };
       return dataSource;
@@ -114,12 +114,31 @@ export class BusStopComponent {
       event.confirm.reject();
     }
   }
-  public addNewRow() {
-        this.rowData.unshift(new BusStop());
-        this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
-        this.gridOptions.api.refreshVirtualPageCache();
+  public addNewRow(): void {
+      if (this.getFirstRowID()) {
+          this.gridOptions.api.insertItemsAtIndex(0, [new BusStop()]);
+          this.isNew = true;
+      }
+  }
+  private parseSort(sort: any): string {
+      if (sort.colId && sort.sort) {
+          let result = sort.colId;
+          if (sort.sort === 'desc') {
+              result = '-' + result;
+          }
+          return result;
+      }
+      return null;
+  }
+  private getFirstRowID(): number {
+      let model = this.gridOptions.api.getModel().getRow(0);
+      let id: number = model.data.busStopId;
+      if (id) {
+          return id;
+      } else {
+          return null;
+      }
   }
-
   private createColumnDefs() {
     this.columnDefs = [
       {
@@ -273,10 +292,10 @@ export class BusStopComponent {
                 }
                 this.enableLoader();
                 result = this.service.create(data).then((busStop) => {
-                    this.rowData[$event.node.rowIndex] = busStop;
-                    this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
+                    this.gridOptions.api.setDatasource(this.setRowData());
                     this.gridOptions.api.refreshVirtualPageCache();
                     this.disableLoader();
+                    this.isNew = false;
                 });
             }
         }
@@ -285,28 +304,24 @@ export class BusStopComponent {
     private deleteRows() {
         let rows = this.gridOptions.api.getSelectedNodes();
         if (!rows.length) {
+            this.isSelected = false;
             return ;
         }
-        rows.forEach((element) => {
+        rows.forEach((element, index, array) => {
             let id = element.data.busStopId;
             if (id) {
                 this.enableLoader();
-                this.service.delete(id).then(() => this.disableLoader());
+                this.service.delete(id).then(() => {
+                    if (index === (array.length - 1)) {
+                        this.disableLoader();
+                        this.gridOptions.api.setDatasource(this.setRowData());
+                        this.gridOptions.api.refreshVirtualPageCache();
+                        this.gridOptions.api.deselectAll();
+                        this.isNew = false;
+                    }
+                });
             }
         });
-        // Sort in order to protect array from reindexing (remove rear elements first)
-        let sorted = rows.sort((a, b) => {
-                if (a > b) {
-                    return -1;
-                } else {
-                    return 1;
-                }
-            });
-        sorted.forEach((item) => {
-            this.rowData.splice(item.rowIndex, 1);
-        });
-        this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
-        this.gridOptions.api.refreshVirtualPageCache();
     }
 
     private onCellDoubleClicked($event) {
@@ -327,7 +342,16 @@ export class BusStopComponent {
     }
 
     private onSelectionChanged() {
-        console.log('selectionChanged');
+        let selection = this.gridOptions.api.getSelectedNodes();
+        if (selection.length) {
+            if (selection.length === 1) {
+                this.gridOptions.api.refreshVirtualPageCache();
+                this.isNew = false;
+            }
+            this.isSelected = true;
+        } else {
+            this.isSelected = false;
+        }
     }
 
     private onBeforeFilterChanged() {
@@ -342,11 +366,11 @@ export class BusStopComponent {
         console.log('onFilterModified');
     }
 
-    private onBeforeSortChanged() {
+    private onBeforeSortChanged(event) {
         console.log('onBeforeSortChanged');
     }
 
-    private onAfterSortChanged() {
+    private onAfterSortChanged($event) {
         console.log('onAfterSortChanged');
     }
 
diff --git a/src/services/bus-stop.service.ts b/src/services/bus-stop.service.ts
index bae51e2..91a65cb 100644
--- a/src/services/bus-stop.service.ts
+++ b/src/services/bus-stop.service.ts
@@ -10,8 +10,13 @@ export class BusStopService {
   private url = 'http://localhost:5000/busstop';
   private headers = new Headers({'Content-Type': 'application/json'});
   constructor(private http: Http) { }
-  getData(): Promise<BusStop[]> {
-    return this.http.get(this.url)
+  getData(from: number = 0, to: number = 100, sort: string = null): Promise<BusStop[]> {
+    let url = this.url;
+    url += '?from=' + from + '&to=' + to;
+    if (sort) {
+      url += '&sort=' + sort;
+    }
+    return this.http.get(url)
       .toPromise()
       .then(response => response.json().busStopEditDsM as BusStop[])
       .catch(this.handleError);
--
libgit2 0.21.4