I am using ag-grid to display and modify data.How Can I switch between editable and non editable for the hole ag-grid. Can I do this with the grid api.
this is my default config:
this.defaultDefs = {
suppressMovable: true,
enableColResize: true,
editable: true,
};
Can I change editable dynamically?
editable can be either a boolean as you have it, or a function
If you use the function form you can determine on a cell by cell basis if you want the given cell to be editable
editable: function(params) {
return true; // true/false based on params (or some other criteria) value
}
you can set editable property by your way just create another function isEditable(columnName) which will give you boolean result.
this.defaultDefs = {
suppressMovable: true,
enableColResize: true,
editable: isEditable(column),
};
Do a logic check in the cellEditingStarted callback, calling the stop() when the check fails. You may need to write some css to style it or add a toast/notification to give the user feedback on why they're not able to edit.
You can use it like this:
editable: (params) => your logic
update your date
call api.redrawRows({ rowNodes: [node] })
You can also use suppressClickEdit in the grid options for a quick disabling:
gridOptions: {
suppressClickEdit: true | false,
...
}
See: https://www.ag-grid.com/angular-data-grid/cell-editing-start-stop/#no-click-editing
A simpler approach
editable: (params:any)=> params.data.isEdit === 'edit' ? true : false
add it to the columndefinitions
*
Note: isEdit === 'edit' is your custom logic
*
Related
Setup Summary: We have two aggrids where we drag from one grid to the second grid. This works perfectly.
Issue: We have some lines we don't want to enable drag on. So we want a conditional drag based on a cell value.
Currently our table settings (we use reactjs) are as follows:
Table 1 and 2 have these properties:
rowData={rowData}
ref={fileGridRef}
columnDefs={columnDefs}
gridOptions={gridOptions}
rowDragManaged={true}
rowDragEntireRow={true}
animateRows={true}
onRowDragEnd={(params: any) => addToFilesGrid(params)}
suppressClickEdit={true}
gridOptions are (for both grids)
rowSelection: "single",
rowMultiSelectWithClick: true,
Column defs are (for both grids)
{
field: "name",
headerName: "File Name",
sortable: true,
filter: true,
editable: true,
cellStyle: { textAlign: "center", marginLeft: "-10px" },
cellRenderer: EditCellRenderer,
rowDrag: (params: any) => {
params.data.type !== ""; //HERE IS THE CONDITION WE HAVE
},
},
{
field: "type",
headerName: "Type",
sortable: true,
filter: true,
editable: false,
}
When the params.data.type is "" we want it not to move.
I tried playing around with rowDragManaged=false, but then nothing moved. I thought about making handlers for onDragEnter/Leave/Move/End, but I would rather avoid that if I can.
Anyone know what the issue is?
Do I have to do unmanaged dragging if I want this to work?
Finally found a solution!
I had seen that rowDrag could be set to a conditional statement but had issues getting it working, and there is one example on ag-grid docs that wasn't helpful in my use case.
So, I have a table, and if a cell is BLANK I don't want the row to drag.
So in the ColDef I had:
rowDrag: params => params.data.type === "",
Because that is what it was in the rowData. Also when I printed out params in other row changing functions (onRowSelected, onRowDragMove, etc...) this field was an empty string -> "".
It seems like for this conditional however it may be treated as an undefined or have a space. Not exactly sure, but I was able to do this:
params => params.data.type.length > 1,
And it worked! This leads me to believe the tags in the aggrid cell or something in their code inserts a space somewhere.
This was shown when I tried
rowDrag: params => params.data.type.length > 0,
and I could still drag the rows where my type field was "".
When the grid loads there is no grouping/filtering applied. I want to be able to remove any grouping/filtering which the user has applied manually i.e. get the grid format back to its original state.
You can do this with help of gridOptions of ag-grid. Try to do the below changes..
Initialize gridOptions if not yet along with column definitions and set the grid options in ag-grid.
Component.ts
this.gridOptions = {
defaultColDef: {
editable: true,
resizable: true,
filter: true
},
columnDefs: this.columnDefs,
rowData: this.rowData
};
clear the filters with like below
...
gridOptions.api.setFilterModel(null);
gridOptions.api.onFilterChanged();
...
component.html
<ag-grid .. [gridOptions] = "gridOptions" ..> </ag-grid>
You can see more about this in the ag-grid documentation.
you can define a function to reset everything
function ResetGrid(){
//clear filters
gridOptions.api.setFilterModel(null);
//notify grid to implement the changes
gridOptions.api.onFilterChanged();
//remove all pivots
gridOptions.columnApi.setPivotColumns([]);
// disable pivot mode
gridOptions.columnApi.setPivotMode(false);
//reset all grouping
gridOptions.api.setColumnDefs(columnDefs);
//where columDefs is the object you used while creating grid first time.
}
the above method does what you want but more sophisticated way to do this will be saving column state(it may be at iniital stage or later after certain operation).
function saveState() {
window.colState = gridOptions.columnApi.getColumnState();
window.groupState = gridOptions.columnApi.getColumnGroupState();
window.sortState = gridOptions.api.getSortModel();
window.filterState = gridOptions.api.getFilterModel();
console.log('column state saved');
}
function restoreState() {
if (!window.colState) {
console.log('no columns state to restore by, you must save state first');
return;
}
gridOptions.columnApi.setColumnState(window.colState);
gridOptions.columnApi.setColumnGroupState(window.groupState);
gridOptions.api.setSortModel(window.sortState);
gridOptions.api.setFilterModel(window.filterState);
console.log('column state restored');
}
function resetState() {
gridOptions.columnApi.resetColumnState();
gridOptions.columnApi.resetColumnGroupState();
gridOptions.api.setSortModel(null);
gridOptions.api.setFilterModel(null);
console.log('column state reset');
}
here is a demo
Here is how you can remove all filters and row groups. For more info, see GridApi.
gridApi.setFilterModel(null);
gridApi.setRowGroupColumns([]);
gridApi.onFilterChanged();
Live Example
Using the release 16.0.0 of the enterprise ag-grid.
When I first start the website, I am able to load the grid and the row click and double click events fire.
When i reload (the grid with new data, the grid does not respond to the click or double click event BUT i am able to set focus to the grid, and move around the grid using the arrow keys.
Here is my gridOptions
var gridOptions = {
columnDefs: columnDefs,
enableColResize: true,
enableSorting: true,
rowSelection: 'single',
getMainMenuItems: getMainMenuItems,
getContextMenuItems: getContextMenuItems,
allowContextMenuWithControlKey: true,
popupParent: document.querySelector('body'),
onGridReady: function (params) {
},
onRowDoubleClicked: function (params) {
popupCard(params.node.data.cardID);
},
onRowClicked: function (params) {
popupCard(params.node.data.cardID);
}
};
As mentioned, I am able to navigate after the data reload using the arrow keys, but the click and double click do not seem to fire.
Any ideas?
If you have defined the functions inside class then you might need to use
onRowClicked: function (params) {
this.popupCard(params.node.data.cardID);
}
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
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
}