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>'}
]
};
Related
I want to enable cell edit based on row index
columnDefs: [
{
field: "Name",
name: "Name",
enableCellEdit: true,
cellEditableCondition: 'row.rowIndex == 2',
cellTemplate: '<div class="ui-grid-cell-contents">{{}}</div>'
}
but above code is not working. If i pass true in cellEditableCondition it works fine. I think row.rowIndex is not giving index. I was able to get row index in cell template as below,
but if i write same code in cellEditableCondition it wont work.
field: "Name",
name: "Name",
enableCellEdit: true,
cellEditableCondition: 'grid.renderContainers.body.visibleRowCache.indexOf(row) == 2', // not working
cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>' //working
Please help me to get rowindex in cellEditableCondition
You should pass a function like this -
cellEditableCondition:
function($scope) {
return $scope.grid.renderContainers.body.visibleRowCache.indexOf($scope.row) == 2;
}
I'm using Angular Ui Grid.How can I show multiple fields for the single column ? Thanks.
I need to show both streetNumber and StreetName on the same column.How can I do that ?
vm.propertyListGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: app.localize('IplNumber'),
field: 'id',
width: 100,
},
{
name: app.localize('BrAddress'),
field: 'address.streetNumber',
width: 140,
}
],
data: []
};
You can use custom template like this
$scope.gridOptions['columnDefs'] = [
{field: 'name', displayName: 'Name'},
{field: 'options',displayName: 'Options', cellTemplate: '<span>{{row.entity.streetNumber}} {{row.entity.StreetName}}</span>'}
];
You can also refer this page for documentation for custom templates http://ui-grid.info/docs/#/tutorial/317_custom_templates
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 have a ng-grid built with following JSON
[{"TankName":"Tnk1","UseFuel":"100","UnusedFuel":"200"},
{"TankName":"Tnk2","UseFuel":"150","UnusedFuel":"600"},
{"TankName":"TOTAL","UseFuel":"0","UnusedFuel":"0"}]
I have configured a NG-GRID to dispay. Grid will display as below
below is the Grid-otions
columnDefs: [
{ field: 'TankName', displayName: 'Fuel Tank', enableCellEdit: false,},
{ field: 'UseFuel', displayName: 'Use Fuel', editableCellTemplate: '<input ng-input="COL_FIELD" ng-model="COL_FIELD"/>' },
{ field: 'UnusedFuel', displayName: 'Unused Fuel', editableCellTemplate: '<input ng-input="COL_FIELD" ng-model="COL_FIELD"/>' }
]
I want to put the column totals (Bottom Row) when user edit something on the gird. I have to show them in "TOTAL" row. I cannot use FooterTemplate since its not suiting my need
Below is my code in controller
$scope.$on('ngGridEventEndCellEdit', function (data) {
var totalRow;
angular.forEach(a.gridOptions_all.ngGrid.data, function (row) {
if (row.TankName.toString().toUpperCase() != 'TOTAL') {
totalUseFuel += Number(row.UseFuel);
totalUnUseFuel += Number(row.UnusedFuel);
}
else {totalRow = row;}
});
totalRow.UseFuel= totalUseFuel ;
totalRow.UnusedFuel= totalUnUseFuel ;
});
here a plunker. Could some say whether is there a better option
Regarding the picture you placed in the question I would solve it like this:
columnDefs: [{
field: 'TankName',
displayName: 'Tank',
enableCellEdit: false,
cellEditableCondition: 'newFunc(row);'
}, {
field: 'UseFuel',
displayName: 'Ballast Fuel',
editableCellTemplate: '<input ng-input="COL_FIELD" ng-model="COL_FIELD"/>'
}, {
field: 'UnusedFuel',
displayName: 'Trapped Fuel',
cellEditableCondition: 'row.rowIndex != 2',
editableCellTemplate: '<input ng-input="COL_FIELD" ng-model="COL_FIELD"/>'
}, {
displayName: 'Total',
cellTemplate: '<div>{{getTotal(row.entity.UseFuel,row.entity.UnusedFuel)}}<div>'
}
]
};
$scope.getTotal = function(uf, uuf) {
return Number(uf) + Number(uuf);
}
Note the cellTemplate and the getTotal function.
Look at this Plunker to see this updating while you type.
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},