Call function from Grid definition

Question

I have a ui-grid column definition as below:

$scope.gridOptions.columnDefs = [
{ name: 'Year 3', field: 'Year 3', cellEditableCondition: function($scope) { return $scope.row.entity[$scope.col['field']+'_editable']; },
  editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
  cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
      if (row.entity[col['field']+'_editable'])
        return 'red';
      else
        return "";
  }
},
{ name: 'Year 4', field: 'Year 4', cellEditableCondition: function($scope) { return $scope.row.entity[$scope.col['field']+'_editable']; }, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
  cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
      if (row.entity[col['field']+'_editable'])
        return 'red';
      else
        return "";
  }
},
{ name: 'Year 5', field: 'Year 5', cellEditableCondition: function($scope) { return $scope.row.entity[$scope.col['field']+'_editable']; }, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
  cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
      if (row.entity[col['field']+'_editable'])
        return 'red';
      else
        return "";
  }
},
{ name: 'Year 6-10', field: 'Year 6-10', cellEditableCondition: function($scope) { return $scope.row.entity[$scope.col['field']+'_editable']; }, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'cagr', editDropdownOptionsArray: $scope.cagrDropDown,
  cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
      if (row.entity[col['field']+'_editable'])
        return 'red';
      else
        return "";
  }
} 

];

For each cellEditableCondition & cellClass a function is called. I don't want to define function for every column definition. Instead i want to define it once and call it for every column.

Can someone please let me know on what scope do we have to define the function and how do we call it?

Thanks!

Answer 1

You can do it with a function:

function isCellEditable(scope) {
     return scope.row.entity[scope.col['field']+'_editable'];
}

function getCellClass(grid, row, col) {
     return row.entity[col['field']+'_editable'] ? 'red' : '';
}

$scope.gridOptions.columnDefs = [
  { name: 'Year 3', field: 'Year 3', cellEditableCondition: isCellEditable,
    editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
    cellClass: getCellClass
  },
  { name: 'Year 4', field: 'Year 4', cellEditableCondition: isCellEditable, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
    cellClass: getCellClass
  },
  { name: 'Year 5', field: 'Year 5', cellEditableCondition: isCellEditable, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
    cellClass: getCellClass
  },
  { name: 'Year 6-10', field: 'Year 6-10', cellEditableCondition: isCellEditable, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'cagr', editDropdownOptionsArray: $scope.cagrDropDown,
    cellClass: getCellClass
  } 
  ];