Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
AngularJS UI Grid Sorting Example
Keywords : UI Grid with sorting example in angularjs, Angularjs ui grid module with sorting feature example, Sort grid data in angularjs using ng-grid / ui grid with example
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Angularjs UI-Grid Sorting Example </title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ui-grid.info/release/ui-grid.js"></script> <link rel="stylesheet" href="https://ui-grid.info/release/ui-grid.css" type="text/css"> <script type="text/javascript"> var app = angular.module("uigridApp", ["ui.grid"]); app.controller("uigridCtrl", function ($scope) { $scope.gridOptions = { enableSorting: true, columnDefs: [ { field: 'name' }, { field: 'age' }, { field: 'location', enableSorting: false } ], onRegisterApi: function (gridApi) { $scope.grid1Api = gridApi; } }; $scope.users = [ { name: "Madhav Sai", age: 10, location: 'Nagpur' }, { name: "Suresh Dasari", age: 30, location: 'Chennai' }, { name: "Rohini Alavala", age: 29, location: 'Chennai' }, { name: "Praveen Kumar", age: 25, location: 'Bangalore' }, { name: "Sateesh Chandra", age: 27, location: 'Vizag' } ]; $scope.gridOptions.data = $scope.users; }); </script> <style type="text/css"> .myGrid { width: 500px; height: 230px; } </style> </head> <body ng-app="uigridApp"> <h2>AngularJS UI Grid Sorting Example</h2> <div ng-controller="uigridCtrl"> <div ui-grid="gridOptions" class="myGrid"></div> </div> </body> </html>
Click Here to See Result
Result
Previous
Next