Is possible to make operation inside the field?
I need to multiply CostoUnitario with Qta, and display it in the TOTALE column
This is my array.In the ng grid, the user will insert values (I setted 4 field just to try).
Everything works fine elsewhere, I can get the result I want, but I need the field Totale to show the multiplication between CostoUnitario and Qta. (It's an invoice.)
$scope.myData = [{Numero:'',Descrizione:'',CostoUnitario:'10',Qta:'1',Totale:''},
{Numero:'',Descrizione:'',CostoUnitario:'90',Qta:'1',Totale:''},
{Numero:'',Descrizione:'',CostoUnitario:'',Qta:'',Totale:''},
{Numero:'',Descrizione:'',CostoUnitario:'',Qta:'',Totale:''},
{Numero:'',Descrizione:'',CostoUnitario:'',Qta:'',Totale:''},
{Numero:'',Descrizione:'',CostoUnitario:'',Qta:'',Totale:''}
];
$scope.gridOptions = {
data: 'myData',
enableCellSelection: true,
enableCellEdit: true,
enableRowSelection: false,
columnDefs: [{field: 'Numero', displayName: 'Numero', enableCellEdit: true},
{field:'Descrizione', displayName:'Descrizione'},
{field: 'CostoUnitario', displayName: 'Costo Unitario', enableCellEdit: true},
{field: 'Qta', displayName: 'Qta', enableCellEdit: true},
{field: 'CostoUnitario*Qta', displayName: 'Totale', enableCellEdit: false}]
You're on the right track. I attached a function to each row in the data and referenced it in field key for the Totale column.
Here's the plnkr
columnDefs: [{field: 'Numero', displayName: 'Numero', enableCellEdit: true},
{field:'Descrizione', displayName:'Descrizione'},
{field: 'CostoUnitario', displayName: 'Costo Unitario', enableCellEdit: true},
{field: 'Qta', displayName: 'Qta', enableCellEdit: true},
{field: 'getTotale()', displayName: 'Totale', enableCellEdit: false}
]
...
angular.forEach($scope.myData, function(row) {
row.getTotale = function() {
return row.CostoUnitario * row.Qta;
};
});
Related
I'm trying to get UI-Grid on my Angular App to filter dates properly but it doesn't seem to respond to any kind of filter change. I've tried going over the docs and using their example:
displayName: "Long Date", cellFilter: 'date:"longDate"', filterCellFiltered:true,
But nothing seems to change the format of the date, here is my code currently: (updated)
$scope.gridOptionsClaims = {
enableSorting: true,
enableFiltering: true,
showColumnFooter: true,
enableGridMenu: true,
columnDefs: [
{ field: 'date', name: 'Date', displayName: "Date", type: 'date', cellFilter: 'date:"MM-dd-yyyy"', filterCellFiltered: true },
{ field: 'transaction_id', name: 'Purchase Order', displayName: "Purchase Order" },
{ field: 'full_name', name: 'Salesperson', displayName: "Salesperson" }
]};
I've tried using filters 'date:MM-dd-yyy' and that didn't work either. Could anyone please tell me what I'm missing?
Did you enable filtering with enableFiltering: true property?
Also, try to define cellFilter with filters as you already mentioned:
cellFilter: 'date:"yyyy-MM-dd HH:mm"'
I know how to have a working UI-Bootstrap-Datepicker inside an ng-grid cell's editableCellTemplate.
My Question:
It does not work anymore when I replace the enableCellEdit=true option with enableCellEditOnFocus=true (single-click on cell to edit). Does anyone have an Idea why it breaks and how to fix that?
var editableCellTemplateUsingDatePicker = '<input ng-class="\'colt\' col.index" datepicker-popup="dd.MM.yyyy" datepicker-append-to-body=true is-open="isOpen" ng-model="COL_FIELD" my-input="COL_FIELD"/>';
$scope.gridOptions = {
data: 'myData',
//enableCellEdit: true,
enableCellEditOnFocus: true,
enableCellSelection: true,
enableRowSelection: false,
columnDefs: [{
field: 'name',
displayName: 'Name'
}, {
field:'dateOfBirth',
displayName:'Date of Birth',
editableCellTemplate: editableCellTemplateUsingDatePicker,
cellFilter: 'date:"dd.MM.yyyy"',
}]
};
Plunker
Now, I found another way to get to the desired behaviour of single-click edit with the ui-bootstrap datepicker.
You can add ng-click="editCell()" to your custom cellTemplate to enter edit-mode through single-click of the cell. Here the working setup:
var cellTemplateEditOnClick = '<div class="ngCellText" ng-click="editCell()" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field) CUSTOM_FILTER}}</span></div>';
$scope.gridOptions = {
data: 'myData',
enableCellEdit: true,
enableCellSelection: true,
enableRowSelection: false,
columnDefs: [{
field: 'name',
displayName: 'Name',
cellTemplate: cellTemplateEditOnClick.replace('CUSTOM_FILTER', '')
}, {
field:'dateOfBirth',
displayName:'Date of Birth',
editableCellTemplate: editableCellTemplateUsingDatePicker,
cellTemplate: cellTemplateEditOnClick.replace('CUSTOM_FILTER', '| date:"dd.MM.yyyy"')
}]
};
Plunker
I would say that having a detail view for a grid is pretty standard, although I can't figure out for the life of me how I would accomplish this with ngGrid. I want a grid that I can expand a row and have it show the details of that row underneath.
Like the below grid:
How do I achieve this? Here is my code so far:
vm.filterOptions = {
filterText: '',
useExternalFilter: false
}
var columns = [{field: 'oper_status', displayName: 'Status', cellTemplate: '<div ng-class="{serverUp: row.getProperty(col.field) == 1}"></div>'},
{field: 'dns_name', displayName: 'Name'},
{field: 'mgmt_ip_address', displayName: 'IP'},
{field: 'model', displayName: 'Model'},
{field: 'boot_version', displayName: 'Version'}];
vm.gridOptions = {
data: 'vm.devices',
columnDefs: columns,
enableRowSelection: true,
multiSelect: false,
selectedItems: vm.selectedItems,
filterOptions: vm.filterOptions,
afterSelectionChange: function() {
vm.details = vm.selectedItems[0];
}
};
-html
<div ng-grid="vm.gridOptions" class="grid"></div>
I have to make an invoice application, and I have to use ng-grid.
But I cannot figure out how to take the value that the user will insert into the cell, and use it.
$scope.myData = [{},{},{}]; /*tre row di default*/
$scope.gridOptions = {
data: 'myData',
enableCellSelection: true,
enableCellEdit: true,
enableRowSelection: false,
columnDefs: [{field: 'Numero', displayName: 'Numero', enableCellEdit: true},
{field:'Descrizione', displayName:'Descrizione'},
{field: 'CostoUnitario', displayName: 'Costo Unitario', enableCellEdit: true},
{field: 'Qta', displayName: 'Qta', enableCellEdit: true},
{field: 'Totale', displayName: 'Totale', enableCellEdit: false},]
};
$scope.addRow = function() {
$scope.myData.push({});
};
I really don't know how to do this!
Try using row.entity object..
On html side, define your input with ng-model="exapmle" as you probably did..
On angular side, get your textbox value with row.entity.example
An example which i did recently.. Look at last column def column..
$scope.gridOptions = {
data: 'accounts',
multiSelect: false,
showFilter: false,
showColumnMenu: false,
showSelectionCheckbox: false,
showGroupPanel: false,
showMenu:false,
showFooter: false,
enableRowSelection: false,
columnDefs: [
{field: 'username', displayName: 'Username', width:180},
{field: 'email', displayName: 'Email', width:250},
{field: 'role.displayTxt', displayName: 'Role', width:120},
{field: 'active', displayName: 'Active', width:80},
{field: '', displayName: ' ', width: 50,
cellTemplate: '<div class="grid-action-cell">' +
'<a class="btn-link" type="button" title="Edit" ng-href="#/accounts/{{row.entity.username}}">' +
'<i class="glyphicon glyphicon-edit" style="left:8px; top:8px;"></i>' +
'</a>' +
'</div>'
},
]
};
I am trying to disable to celledit for a column in a nggrid:
$scope.gridOptions = {
data: 'myData',
enableCellSelection: true,
enableCellEditOnFocus:true,
enableRowSelection: false,
columnDefs: [{field: 'name', displayName: 'Name', enableCellEdit: true},
{field:'age', displayName:'Age',
cellTemplate: '<div ng-disabled=true ng-class="{green: row.getProperty(col.field) == row.getProperty(\'name\'),red:row.getProperty(col.field) != row.getProperty(\'name\')}"><div style="text-align:center;" class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
};
I tried ng-disabled=true but it does not work? how to do this?
plunkr:http://plnkr.co/edit/nj57V6WcHJxN5OosvwYx?p=preview
Could you try using enableCellEdit: false ?
columnDefs: [{field: 'name', displayName: 'Name', enableCellEdit: false},