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
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
For your first question, to disable client-side sorting of ui-grid, you need to set this flag in gridOptions with false as follow:
scope.gridOptions.enableSorting: false;
For your second question, to make your view change with re-setting the data of the grid, try adding this line afterwards:
scope.$apply
Just putting property enableSorting = false with solve your problem of sorting.
enableSorting:false
