Switch between editable and non editable mode in ag-grid

Question

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?

score 17 · Answer 1 · edited Jul 27 '17 at 20:20

17

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
}

edited Jul 27 '17 at 20:20

thirtydot

224,678
48
389
349

answered Jul 27 '17 at 17:15

Sean Landsman

7,033
2
29
33

thx I will try this by the way does this function affect the column that are always not editable I have same column where I specify editable:false will this function affect them – Mohamed Amine Ouali Jul 27 '17 at 17:18
You can set editable by column too - this will override the setting on the defaultDefs – Sean Landsman Jul 27 '17 at 17:20
So if defaultDefs get a function or a Boolean it will always be override – Mohamed Amine Ouali Jul 27 '17 at 17:24
No, what i mean is that any setting on detaultCols can be overridin on a column by column basis. Set any default on defaultDefs (say to be not editable) then override on a column by column basis as appropriate. Note that the default setting for a column is for it to NOT be editable – Sean Landsman Jul 27 '17 at 17:26

score 1 · Answer 2 · edited Apr 06 '18 at 15:29

1

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),            
};

edited Apr 06 '18 at 15:29

koolhuman

1,581
15
25

answered Apr 06 '18 at 09:23

Nirav Bhadradiya

11
2

score 0 · Answer 3 · edited Feb 07 '19 at 14:27

0

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.

edited Feb 07 '19 at 14:27

Eric Aya

69,473
35
181
253

answered Feb 07 '19 at 13:43

Chris Francart

28
5

1

One side-effect of this is that the edit interface will briefly flicker in between starting / canceling the edit, better to use a callback for the editable property, this way you can prevent entering edit mode at all on a cell-by-cell level if desired – blue18hutthutt Oct 01 '20 at 04:41

score 0 · Answer 4 · answered Jan 20 '22 at 15:50

0

You can use it like this:

editable: (params) => your logic
update your date
call api.redrawRows({ rowNodes: [node] })

answered Jan 20 '22 at 15:50

Valentin Anchev

1
1

score 0 · Answer 5 · answered Sep 05 '22 at 15:28

0

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

answered Sep 05 '22 at 15:28

ironmouse

1,292
2
15
23

score 0 · Answer 6 · answered Feb 22 '23 at 13:44

0

A simpler approach

        editable: (params:any)=> params.data.isEdit === 'edit' ?  true :  false

add it to the columndefinitions

*

Note: isEdit === 'edit' is your custom logic

*

answered Feb 22 '23 at 13:44

Vignesh Ravichandran

169
3
10

Switch between editable and non editable mode in ag-grid

6 Answers6