AngularJs, display function result in ui-grid

Question

I am trying to sum two columns in a function then display their result in the ui grid. any ideas about how to do this, then save the ui grid content in the database?

see the picture so in my case : a and b are binded from the database, while I want angularjs to calculate their sum and add it in the column "Quantite reelle". this is my grid code $scope.gridOptions = {

    showGridFooter: true,
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
        gridApi.core.on.renderingComplete($scope, function () {

            $timeout(function () {
                var gridBodyElem = document.getElementById(gridApi.grid.id + '-grid-container');
                gridApi.grid.element.on('mouseup', handleGridClick);
            });
        });
    }

};
$scope.gridOptions.columnDefs = [
    { name: 'Num', enableHiding: false, enableColumnMenu: false, enableCellEdit: false, width: '5%' },
    { name: 'CodeArticle', enableHiding: false, enableColumnMenu: false, displayName: 'Code Article ', width: '10%' },
    { name: 'Ref', enableHiding: false, enableColumnMenu: false, displayName: 'Référence ', width: '10%' },
    { name: 'Designation', enableHiding: false, enableColumnMenu: false, displayName: 'Désignation ', width: '30%' },
    { name: 'Stock', enableHiding: false, enableColumnMenu: false, displayName: "Qté théorique (a)", width: '13%' },
    { name: "ajust", enableHiding: false, enableColumnMenu: false, displayName: "Ajustement (b)", width: '12%' },
    { name: "sum", enableHiding: false, enableColumnMenu: false, displayName: "Quantité Réelle(a+b)", width: '14%' },
    { name: "motif", enableHiding: false, enableColumnMenu: false, displayName: "Motif", width: '20%' }
];

` thank you guys.

Vijay Raheja · Accepted Answer · 2018-10-11 09:14:46Z

0

You need to set column field property to expression.

$scope.gridOptions.columnDefs = [
{ name: "sum", enableHiding: false, enableColumnMenu: false, field:'CalculateSum(a,b)', displayName: "Quantité Réelle(a+b)", width: '14%' } ];

Here a & b are respective column names.

answered Oct 11, 2018 at 9:14

Vijay Raheja

2902 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

minguo binguo Over a year ago

and how can the function CalculateSum(a,b) be? Im beginner and trying to figure out how to work with ui-grid.

Vijay Raheja Over a year ago

Define this in $scope.CalculateSum = function(a,b) {return a+b;}

minguo binguo Over a year ago

apparently, the function is not getting the values of a and b from the grid. I guess they should be called diferently? like row.sum or idk?

Vijay Raheja Over a year ago

You can also directly sum inside the field .$scope.gridOptions.columnDefs = [ { name: "sum", enableHiding: false, enableColumnMenu: false, field:'a + b', displayName: "Quantité Réelle(a+b)", width: '14%' } ];

minguo binguo Over a year ago

Unfortunately, none of the solutions have worked to me! the values of the columns arent getting read. everytime I use them, it shows undefined

|

Meow3301 · Accepted Answer · 2018-10-11 09:11:50Z

0

You can try this:

$scope.gridApi.grid.columns[column a].getAggregationValue() + 
$scope.gridApi.grid.columns[column b].getAggregationValue()

answered Oct 11, 2018 at 9:11

Meow3301

758 bronze badges

1 Comment

minguo binguo Over a year ago

Unfortunately, none of the solutions have worked to me! the values of the columns arent getting read. everytime I use them, it shows undefined – whats the equivalent of $scope when It comes to a grid? so I can use the values of a specified column

minguo binguo · Accepted Answer · 2018-10-11 11:27:27Z

 $scope.gridOptions.columnDefs = [
    { name: 'Num', enableHiding: false, enableColumnMenu: false, enableCellEdit: false, width: '5%' },
    { name: 'CodeArticle', enableHiding: false,field:'CodeArticle', enableColumnMenu: false, displayName: 'Code Article ', width: '10%' },
    { name: 'Ref', enableHiding: false,enableColumnMenu: false, displayName: 'Référence ', width: '10%' },
    { name: 'Designation', enableHiding: false, enableColumnMenu: false, displayName: 'Désignation ', width: '30%' },
    { name: 'Stock', enableHiding: false,field:'Stock', enableColumnMenu: false, displayName: "Qté théorique (a)", width: '13%' },
    { name: "ajust", enableHiding: false, field: 'ajust', enableColumnMenu: false, displayName: "Ajustement (b)", width: '12%' },
    { name: "sum", enableHiding: false, enableColumnMenu: false, field: 'CalculateSum(ajust,Stock)', displayName: "Quantité Réelle(a+b)", width: '14%' },
    { name: "motif", enableHiding: false, enableColumnMenu: false, displayName: "Motif", width: '20%' }
];

$scope.CalculateSum = function (ajust, Stock) {


    return ajust + Stock;
};

Remko · Accepted Answer · 2018-10-16 13:03:07Z

Following Tutorial: 323 More Binding examples I created a Plunker, using a filter calculateSum to calculate the sum of both fields.

angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid'])
  .controller('MainCtrl', MainCtrl)
  .filter('calculateSum', function () {
  return function (input, a, b) {
    return input[a]+input[b];
  };
});;

MainCtrl.$inject = ['$http', 'uiGridConstants'];

function MainCtrl($http, uiGridConstants) {
  var vm = this;

  vm.gridOptions = {
    enableFiltering: true,
    onRegisterApi: function(gridApi){
      vm.gridApi = gridApi;
    },
    columnDefs: [
      { field: 'name'},
      { field: 'num1'},
      { field: 'num2'},
      { name: 'sum', field: uiGridConstants.ENTITY_BINDING, cellFilter: 'calculateSum:"num1":"num2"' }
    ]
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .then(function(response) {
      response.data.forEach(function(row){
        row.num1 = row.age;
        row.num2 = row.age*2;
      });
      vm.gridOptions.data = response.data;
    });
}

Collectives™ on Stack Overflow

AngularJs, display function result in ui-grid

4 Answers 4

7 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related