I am currently working on a ui-grid that has a column C which displays percentage values. There is a button labeled "add rows" that allows users to add new rows to the grid. However, the catch is that users can only add new rows until the total percentage in column C reaches 100%. After that point, no more rows can be added.
How should we define the grid options to accommodate this limitation?
$ctrl.structuringGrid = {
columnDefs: [
{
name: 'structurer',
displayName: 'Structurer',
headerCellClass: 'text-align-center',
headerTooltip: true,
editableCellTemplate: "<input name=\"structurer\" ng-model=\"MODEL_COL_FIELD\" ng-class=\"'colt' + col.uid\" class=\"form-control\" type=\"text\" uib-typeahead=\"user as user.name for user in grid.appScope.$ctrl.fetchUsers($viewValue)\" typeahead-select-on-blur='true' typeahead-min-length=\"4\" typeahead-editable=\"false\" ui-grid-editor>",
cellTemplate: "<input style=\"height:26px;\" name=\"structurer\" ng-model=\"MODEL_COL_FIELD\" ng-class=\"'colt' + col.uid\" class=\"form-control\" type=\"text\" uib-typeahead=\"user as user.name for user in grid.appScope.$ctrl.fetchUsers($viewValue)\" typeahead-select-on-blur='true' typeahead-min-length=\"4\" typeahead-editable=\"false\" ui-grid-editor>",
cellEditableCondition: true,
width: 200
},
{
name: 'Business',
displayName: 'Structuring Business',
headerCellClass: 'text-align-center',
headerTooltip: true,
width: 200,
cellTemplate: "<select name=\"structBusiness\" model=\"MODEL_COL_FIELD\" list-id=\"'STRUCT_BUSINESS'\" align=\"right\" edit-enabled=\"true\" disable=\"false\" custom-select-value=\"'value'\" ordering=\"'value'\"></select> ",
cellEditableCondition: true
},
{
name: 'SubBusiness',
displayName: 'Structuring Sub-Business',
cellTemplate: "<loud-select name=\"'structSubBusiness'\" model=\"MODEL_COL_FIELD\" items=\"$ctrl.subbusinessList\" align=\"right\" edit-enabled=\"true\" disable=\"false\" custom-select-value=\"'value'\" ordering=\"'value'\"></loud-select>",
headerCellClass: 'text-align-center',
headerTooltip: true,
width: 200,
cellEditableCondition: true
},
{
name: 'BusinessAllocation',
displayName: 'Business Allocation',
cellTemplate: "<input style=\"height:26px; background-color: #091c2b;\" type=\"number\" name=\"structBusinessAllocation\" ng-model=\"MODEL_COL_FIELD\" text-align=\"right\" placeholder=\"0.00\" ng-max=\"99.99\" ng-min=\"0\" > </input>",
headerCellClass: 'text-align-center',
aggregationType: uiGridConstants.aggregationTypes.sum,
headerTooltip: true,
width: 200,
cellEditableCondition: true,
height: 25
},
{
name: 'actions',
displayName: 'Actions',
headerTooltip: true,
width: 100,
enableFiltering: false,
cellTemplate: getButtons()
}
],
enableSorting: false,
minRowsToShow: 7,
autoResize: true,
enableHorizontalScrollbar: 0,
enableVerticalScrollbar: 1,
enableRowSelection: true,
enableFullRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
enableFiltering: false,
enableGridMenu: false,
onRegisterApi: function(gridApi){
$ctrl.aGridApi = gridApi;
}
};
When the button is clicked, the following code is executed:
$ctrl.addNewRow = function() {
console.log(" Total business allocation -------------------------- " + $ctrl.GridApi.grid.columns[3].getAggregationValue());
$ctrl.Grid.data.push({Id:'', structurer: '', business: '', SubBusiness: '', BusinessAllocation: ''});
};