How to disable client side sorting in angular ui-grid?

Question

I have two questions.

I am trying to disable client side sorting in ui-grid, how can I do it?
Instead of client side sorting, I need to set another data set to ui-grid and refresh the data set.

scope.gridOptions.data = res;

scope.gridApi.core.refresh();

first link I am trying to assign new data to ui-grid and refresh the ui-grid. This is not working? How can I do that ?

Thank you

Which is the grid that you have used? Can you share the URL? — Nitheesh

Nitheesh Nitheesh · Accepted Answer · 2016-11-09T11:31:43

In order to disable the client side sorting of ui-grid, you need to set enableSorting: false on grid definition.

<!doctype html>
<html ng-app="app">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
</head>

<body>

    <div ng-controller="MainCtrl">

        <div id="grid1" ui-grid="gridOptions1" class="grid"></div>
        <button ng-click="resetGrid()">Reset</button>
    </div>


    <script>
        var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

        app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
            $scope.gridOptions1 = {
                enableSorting: false,
                columnDefs: [
                    {
                        field: 'name'
                    },
                    {
                        field: 'gender'
                    },
                    {
                        field: 'company'
                    }
                ],
                onRegisterApi: function (gridApi) {
                    $scope.grid1Api = gridApi;
                }
            };

            $scope.toggleGender = function () {
                if ($scope.gridOptions1.data[64].gender === 'male') {
                    $scope.gridOptions1.data[64].gender = 'female';
                } else {
                    $scope.gridOptions1.data[64].gender = 'male';
                };
                $scope.grid1Api.core.notifyDataChange(uiGridConstants.dataChange.EDIT);
            };


            $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
                .success(function (data) {
                    $scope.gridOptions1.data = data;
                });

            $scope.resetGrid = function () {
                $scope.gridOptions1.data = [
                    {
                        'company': "Company1",
                        'gender': "gender1",
                        'name': "name1"
	              },
                    {
                        'company': "Company2",
                        'gender': "gender2",
                        'name': "name2"
	              }
	            ];
            }

          }]);
    </script>
</body>

</html>

In order to refresh the data set you need to reset the data source of the grid i.e, need to set the new data source to $scope.gridOptions1.data

How to disable client side sorting in angular ui-grid?

3 Answers