Ag - grid isEditable for row editing depends on a button value outside of ag-grid - ag-grid

so basically i have this checkbox button , when multiple will be clicked their values gets updated in each row .
Alright now i have this edit button outside of ag grid that will determine now i can edit those selected rows.
I know i can update col defs. or use valueParam from that checkbox to isEditable call back function, But I require an variable value that's outside of ag-grid.
Please help !!!!!

So we can use a external variable via providing context property in aggrid grid options .
enableEdit(table:any){
if(table === 'tableOne'){
this.editTable1 = !this.editTable1;
this.grid1.gridOptions.context= {
allowEdit: this.editTable1,
}
}else{
this.editTable2 = !this.editTable2;
this.grid1.gridOptions.context= {
allowEdit: this.editTable2,
}
}
}
With col defs as =>
{headerName: 'Status',editable:(param)=>{return allowCagRefEdit(param)}, field: 'status', sortable: true, filter: true, lockVisible: true, lockPosition: true, filterParams: { newRowsAction: 'keep'}},
where allowCagRefEdit is a function =>
function allowCagRefEdit(params){
console.log("params value ***",params);[enter link description here][1]
let checkkBoxSelected = false;
if(params.data && params.data.cagRefManualCheck){
checkkBoxSelected = true;
}else{
checkkBoxSelected = false;
}
if(params.context && params.context.allowEdit && checkkBoxSelected){
return true;
}else{
return false;
}
}

Related

How to disable row group expand functionality on one row?

After a lot of searches in SO without any particular solution, I am compelled to ask this question.
What I want is to hide a row group icon on a single group row. Like in the below picture I have a group row that has only one record, which is already shown in the top row. I want to hide that collapse icon on that single record. Only collapse/expand icon shown when group rows are more than one.
For reference see AG-Grid Master-Detail Section, here they specify which rows to expand. Same functionality I needed here.
I'm using the below versions of AG-Grid Angular (v9)
"#ag-grid-community/core": "^25.3.0",
"#ag-grid-enterprise/row-grouping": "^26.0.0",
"#ag-grid-enterprise/server-side-row-model": "^25.3.0",
"ag-grid-angular": "^25.3.0",
"ag-grid-community": "^25.3.0",
Here is my code:
this.rowModelType = 'serverSide';
this.serverSideStoreType = 'partial';
this.cacheBlockSize = 20;
this.gridOptions = {
rowData: this.loanlist,
columnDefs: this.generateColumns(),
getNodeChildDetails: function(rowItem) {
if (rowItem.orderCount > 1) {
return {
expanded: true
}
} else {
return null;
}
}
}
The issue is the getNodeChildDetails is not accessible. Browser console showing me the below warning and my above code is not working.
This is simple to achieve using a cellRendererSelector on the autoGroupColumnDef. You can specify whether to show the default agGroupCellRenderer or simply return another renderer (or, just return null):
this.autoGroupColumnDef = {
cellRendererSelector: (params) => {
if (params.value == 'United States') {
return null;
} else {
return {
component: 'agGroupCellRenderer',
};
}
},
};
In the example below, we are disabling the row group expand functionality on the United States row.
See this implemented in the following plunkr.
The solution isn't that hard - but could be tough, agreed (one day faced with the same case)
So - the answer is custom cell renderer.
It would look a little bit different (separate column for collapse\expande action) - but you would get all control of it.
Custom rendeder component for this action would look like :
template: `
<em
[ngClass]="{'icon-arrow-down':params.node.expanded, 'icon-arrow-right': !params.node.expanded}"
*ngIf="yourFunctionHere()"
(click)="toggleClick()">
</em>`,
export class MasterDetailActionComponent implements ICellRendererAngularComp {
private params: any;
agInit(params: any): void {
this.params = params;
}
public toggleClick(): void {
this.params.node.setExpanded(!this.params.node.expanded);
}
public yourFunctionHere(): boolean {
// so here you are able to access grid api via params.api
// but anyway params.node - would give you everything related to row also
}
refresh(): boolean {
return false;
}
}
in [ngClass] - you are able to handle the visual part (icons) - modify\customize
and don't forget to add this component in the gridOptions:
frameworkComponents: {
'masterDetailActionCellRenderer': MasterDetailActionComponent,
}
and include this column in your columnDef:
columnDefs: [
headerName: "",
width: 75,
field: "expand",
cellRenderer: "masterDetailActionCellRenderer",
filter: false,
resizable: true,
suppressMenu: true,
sortable: false,
suppressMovable: false,
lockVisible: true,
getQuickFilterText: (params) => { return '' }
]

Ag-Grid row data .map param.value

I am using Ag-Grid React - and trying to map the params.value in the rowData using:
{
headerName: "Assigned To",
field: "assignedTo",
colId: "assignedTo001",
sortable: true,
floatingFilter: true,
filter: 'agTextColumnFilter',
cellRendererFramework: function(params) {
if(!params.data.assignedTo) {
return ''
}
// return JSON.stringify(params.data.assignedTo)
params.data.assignedTo.map((user) => {
if(user) {
return JSON.stringify(user)
}else{
return 'Not assigned'
}
})
}
},
The commented out line above the .map // return JSON.stringify(params.data.assignedTo) works fine, but I need to map through the array to display the user.uid or user.name.
I started off trying to use the default params.value, that did't work so I switched to using the params.data.
The code above is not working, getting a Uncaught Error: cellRendererFramework(...): Nothing was returned from render. error.
What is the best way to return multiple values from an array in a row?
Add return statement before params.data.assignedTo.map((user) => {

Is there a way to reload cellEditorParams in ag-grid editable cell of type agSelectCellEditor?

I am using agSelectCellEditor to show a dropdown in a particular column cells. This is the column definition:
{
headerName: 'Service', field: 'ServiceId', width: 180, suppressMenu: true, lockPosition: true, type: 'numberColumn',
cellEditor: 'agSelectCellEditor',
cellEditorParams: {
values: extractValues($scope.Services)
},
valueFormatter: function (params) {
if (!params.node || params.node.data.Id === 0) {
return lookupValue($scope.Services, params.value);
}
else {
return params.node.data.ServiceName;
}
},
valueParser: function (params) {
return lookupKey($scope.Services, params.newValue);
},
editable: function (params) {
return params.node.data.UIRecordCategory === "Yes" && params.node.data.Id === 0;
}
}
above code works fine when user lands on the page first time. There is another even outside of the grid which pulls data from server. On the success of that event, values in the editable cell dropdown should get reloaded. But thats not happening. It continues to show old values.
Is there any way I can reload cellEditorparams on an event?

ag-grid disable checkbox programatically via gridOptions API

I have a column with checkboxSelection=true
Under some conditions and via the API, I would like to decide whether the checkbox is readonly, i.e., I can't check/uncheck.
Is this possible?
If someone is still looking for an answer for this,
I found a simple solution,
in your gridOptions add the following
gridOptions = {
columnDefs: [
{
checkboxSelection: true,
cellStyle: params =>
params.value === 'YOUR_VALUE' ?
{'pointer-events': 'none'}
: ''
}
]
};
The property checkboxSelection can either be a boolean OR a function.
https://www.ag-grid.com/javascript-grid-column-properties/#gsc.tab=0
By using a function you can show or hide the checkbox row-based:
checkboxSelection = function(params) {
// add your cancheck-logic here
if (params.data.yourProperty) {
return true;
}
return false;
}
Disabling a checkbox is not possible out of the box. One possible way is to reset the checkbox back to it's original state:
onRowSelected:(params) => {
if(params.data.yourProperty && params.node.isSelected())
params.node.setSelected(false);
}
Instead of using checkboxSelection=true, you can try cellRenderer
field: 'isMandatory',
cellRenderer: (params) => {
if (params.value) {
return `<input type="checkbox" checked/>`;
}
else {
return `<input type="checkbox" />`;
}
}
As per documentation, you can you isRowSelectable in your gridConfig
isRowSelectable: function(rowNode) {
return rowNode.data ? rowNode.data.condition: false;
},
isRowSelectable does not work in single selection mode.
Better to disable it using css
cellClassRules:
{
'checkbox-disabled': isCheckboxDisabled ,
}
For those still looking for an answer:
use isRowSelectable in gridConfig
set showDisabledCheckboxes: true in column defs

Row selectable in ag-grid

As the title, I want to make a row selectable by some conditions with using ag-grid in angularjs.
In the past, I used ui-grid and its property "isRowSelectable" to make it.
$scope.options = {
...
isRowSelectable:function(row){
return row.entity.taskExecutionStatus===0?true:false;
}
}
However, the ag-grid doesn't have the property "isRowSelectable" like ui-grid.
How can I fix it now?
Check if the row is selectable or not in gridOptions.onSelectionChanged() function.
If false, then use node.setSelected(false, false, true) to deselect the row;
A valid solution is to use checkbox selection when you don't want all the rows to be selectable, something like this:
$scope.options = {
columnDefs: [
{headerName: "",
width: 17,
cellStyle: {'padding': '2px'},
checkboxSelection: function(row){
return row.entity.taskExecutionStatus===0?true:false;
}
},
...
],
...
rowSelection: 'single', // or 'multiple'
suppressRowClickSelection: true,
...
};
To select Single row in ag-grid:
$scope.Gridoptions:{
columnDefs:...,
rowData:...,
onRowClicked: RowClick,
rowSelection: 'single',
};
function RowClick(param) {
//To Find CurrentRow Index
var currentRowIndex = param.rowIndex;
//GridData
var gridData = $scope.gridOptionsInstrumentRegister.rowData;
//Item ShowS RoWData
var Item = params.data;
}
checkboxSelection: function (params) {
params.node.selectable = false; // this will explicitly restrict to select (useful in select all)
return true/false; // this will show or hide the checkbox
}