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;
}
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'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 use ngGrid to display my data. I would like to use cellFilter and cellTemplate together for the specific column, but seems they do not work together.
when I use cellFilter or cellTemplate seperately they work perfect. Basically, I would like to format the value of the cells in this way (e.g 500000 --> 500,000; 1000000 --> 1,000,000) and also I would like to make negative values in a red colour. How can I solve this? Thanks!
$scope.gridOptions = {
data: 'data',
columnDefs: [
{
field: 'Settled',
cellFilter: 'number',
cellTemplate: '<div ng-class="{red: row.getProperty(col.field) < 0}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'
}]
}
I found the answer myself :p
It is so simple.
$scope.gridOptions = {
data: 'data',
columnDefs: [
{
field: 'Settled',
cellTemplate: '<div ng-class="{red: row.getProperty(col.field) < 0}"><div class="ngCellText">{{row.getProperty(col.field) | number }}</div></div>'
}]
}
As ng-grid is now UI-Grid v3.x, referencing the default template for ui-grid/uiGridCell
$templateCache.put('ui-grid/uiGridCell',
"<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"
);
I would say the cellTemplate in the updated UI-Grid should be the following:
$scope.gridOptions = {
data: 'data',
columnDefs: [
{
field: 'Settled',
cellFilter: 'number',
cellTemplate: '<div class="ui-grid-cell-contents" ng-class="{red: COL_FIELD < 0}">{{COL_FIELD CUSTOM_FILTERS}}</div>'
}]
}
You can also use the cellClass property instead, and leave the cell template default. However, this applies the class to the .ui-grid-cell. The cell template would apply the class to the child of .ui-grid-cell, which in my example above is .ui-grid-cell-contents. Whichever works for your situation, I suppose.
$scope.gridOptions = {
data: 'data',
columnDefs: [
{
field: 'Settled',
cellFilter: 'number',
cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
var cellVal = grid.getCellValue(row, col);
return (cellVal < 0) ? 'red' : '';
}
}]
}
Based on Mammadj's answer I could work out my own cellTemplate combined with cellFilter. Here is my solution for reference, where executionStatus is the value of the cell which was previously used as cellFilter: 'emJobStateLabel'. Here the executionStatus is piped to emJobStateLabel in a cell template:
cellTemplate: '<div class="em-row">{{row.entity.executionStatus | emJobStateLabel}} {{row.entity["previewStatus"]==\'New\'?\'\':\'(\'+row.entity.previewStatus+\')\'}}</div>'
Don't forget to remove the property cellFilter.
here's how i defined one of my col in Ui grid :
getDeviceTypeList = function () {
BaseInfoService.getDeviceTypeList().then(function (data) {
debugger;
$scope.deviceTypeList = data;
$scope.gridOptions.columnDefs.push(
{
headerCellTemplate: '<div>{{"common.DeviceType"|translate}}</div>',
cellTemplate: '<div>{{getExternalScopes().deviceTypeFormatter(row.entity.DeviceTypeCode)}}</div>',
field: 'DeviceTypeCode',
enableCellEdit: true,
editType: 'dropdown',
editDropdownOptionsArray: $scope.deviceTypeList,
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownIdLabel: 'SubCode',
editDropdownValueLabel: 'ParamDesc',
editModelField: 'DeviceTypeCode'
}
);
})
}
but other col defined like :
$scope.gridOptions = {
columnDefs: [
{
name:"soheil"},
{ name: 'توضیحات', field: 'Command', headerCellTemplate: '<div>{{"common.Comment"|translate}}</div>', editModelField: 'Command' },
{ name: 'تعداد', field: 'NeededDeviceNumber', headerCellTemplate: '<div>{{"common.NeededDeviceNumber"|translate}}</div>', type: 'number', editModelField: 'NeededDeviceNumber' },
//{ name: 'نوع وسایل', field: 'DeviceType', headerCellTemplate: '<div>{{"common.DeviceType"|translate}}</div>', cellTemplate: '<select ng-model="neededDiviceViewModel.templateCode" ng-options="item.SubCode as item.ParamDesc for item in dastourKarViewModelList"><option value="" style="display:none" selected="selected">انتخاب</option></select>' }
],
}
how can i defined custom position for column ? Now It's like :
1 3 5 2 4
and that's not what i want , Like : 1 2 3 4
Any Idea ?
Thanks
Use the splice function to insert new column definitions at the correct place
$scope.columns.splice(1, 0, { field: 'company', enableSorting: false });
Above code adds a new column at the second position. See the example from the uioo-grid tutorial
UPDATE: For your this requirement "assume the column should be like this : col1 col2 dynamic-col col3 but now it's like : dynamic-col col1 col2 col 3" you need to use following code
$scope.gridOptions.columnDefs.splice(2, 0, { headerCellTemplate: '<div>{{"common.DeviceType"|translate}}</div>',
cellTemplate: '<div>{{getExternalScopes().deviceTypeFormatter(row.entity.DeviceTypeCode)}}</div>',
field: 'DeviceTypeCode',
enableCellEdit: true,
editType: 'dropdown',
editDropdownOptionsArray: $scope.deviceTypeList,
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownIdLabel: 'SubCode',
editDropdownValueLabel: 'ParamDesc',
editModelField: 'DeviceTypeCode'
});
columnDef is an array and you need to just push the columns in same sequence in which you want to show. For push dynamically columns, you need to handle these cases through data and code.
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.