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>
Related
Hi i need to add two buttons into a single column..How to do it with UI-Grid (AngularJS).
Thanks in advance :)
You can use cellTemplate key in columnDefs
$scope.gridOptions = {
data: 'list',
multiSelect: false,
columnDefs: [{ field: 'name', displayName: 'Name'},
{ field: 'description', displayName: 'Description'},
{ displayName: 'Actions', cellTemplate:
'<div class="grid-action-cell">'+
'<a ng-click="$event.stopPropagation(); updateThisRow(row.entity);" href="#">Update</a>'+
'<a ng-click="$event.stopPropagation(); deleteThisRow(row.entity);" href="#">Delete</a></div>'}
]
};
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
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;
};
});
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},