Sorting angular ui-grid money column

Question

I'm trying to sort a grid on a column where the values are in dollars (with $ and , included) but the sorting doesn't work correctly on that - is there a way to get the sorting to work on this, or if necessary, set the values to numbers and then display as money?

i have:

$scope.data = [
    { 'value': '$1,000,000' },
    { 'value': '$100,000' },
....
    { 'value': '$1,000' }
];
$scope.gridOptions = {
enableSorting: true,
data: $scope.data,
columnDefs: [
...
    { name: 'Value', field: 'value', width: 110 }
]

I think your value should be in plain number like 100000 then apply column ui-grid filter to show formatted currency value — Pankaj Parkar
– Pankaj Parkar, Commented Jan 27, 2016 at 19:42
Filter just allows you to filter the results - do you mean cellClass? — Ben S
– Ben S, Commented Jan 27, 2016 at 20:46

SakthiSureshAnand · Accepted Answer · 2016-01-30 05:26:58Z

I dont see your exact Html and other JS code , So I tried myself Click on a column header to sort by that column. If you missed anything in your code please include it.I posted my working example.,

Html code ,

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.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">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <br>
  <br>
  <div id="grid1" ui-grid="gridOptions1" class="grid"></div>
  <br>
</div>
    <script src="app.js"></script>
  </body>
</html>

JS Code

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

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {

  $scope.data = [
    { 'value': '$1,000,000' },
    { 'value': '$100,000' },
    { 'value': '$1,000' }
];
  $scope.gridOptions1 = {
    enableSorting: true,
    columnDefs: [
      { field: 'value',
        name:'value'},
    ],
  };
      $scope.gridOptions1.data = $scope.data;
}]);

Collectives™ on Stack Overflow

Sorting angular ui-grid money column

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related