Open editor on a cell based on condition

Red Sniper

Link to case: https://live.datatables.net/cerotibe/1/edit
Description of problem:
I have a table with 3 columns (A, B, C) with editing features.

I want to prevent a user inserting data in column B or C, based on the content of A.
So if the user tries to click B or C, instead it opens the input of the right column.

I have tried using close() , or edit({columnNumber: xyz}) but i get an error due to what i do in the preOpen event that gets triggered.
In this example, "testProperty" immediately triggers an error , while in my code only when I call the edit({columnNumber: xyz}) if the clicked column is the wrong one (based on column A value). It seems that when I manually want to redirect to the correct column and open it, datatables cannot find the data of that row when enteres the preOpen again. the testProperty is , in my code, something I need to perform some actions that may prevent the cell to be edited , so it is mandatory to have it even on the 2nd call.

So i was wondering if this was perhaps the correct way of doing so, or if datatable/editor already provides something for these cases

Let me know
Best regards

allan

It is complicated by the use of KeyTable. Without that, it is just a straightforward case of some logic in the click event handler. However, with KeyTable present, it makes it a little more complicated.

The first thing to say is not to have both KeyTable and your own click event handler to trigger inline editing. Just let KeyTable handle it.

Then, use preOpen to check if the field should be allowed to be edited. If it isn't return false; and using a setTimeout immediately trigger focus on the cell that should be edited (since you have editOnFocus that will open the editor on that cell).

Allan

Red Sniper

Hello Allan,
thanks for the reply.
In my source code I only have the KeyTable managing the inline editing; I don't know why, I need to create an event listener in the test case's page.

Here is an updated test case after some tests performed locally.
https://live.datatables.net/cerotibe/2/edit

Perhaps I'm not getting what you were saying.
I can programmatically trigger the editor's edit() and pass him a selector.
I noticed that editor.modifier() seems to contain the selector. When I edit a cell clicking on it, the modifier() is an object with row, column, columnvisible data.
So I tried both passing a selector and passing an object as above, but I cannot access the data of that row.

I don't know what I'm doing wrong..

allan

but I cannot access the data of that row.

I'm not sure I understand that I'm afraid. You have modelObj.datatable.data()[modelObj.editor.modifier().row].a === 'C' which is correctly resolving to the a property of the row and testing against it.

I've made a few changes to the example ( https://live.datatables.net/cerotibe/4/edit ):

1. Included KeyTable, as it wasn't doing much without it
2. Changed keys.selector to keys.columns - there is no selector option for the keys object. That presents focus on the first column
3. Adding a console.log statement at the start of preOpen to confirm that we can access the whole row's data
4. Removed any reference to .field('a') since it doesn't exist
5. Simplified the logic for determining if the correct cell is being edited
6. Added some extra test rows
7. Change from editor.edit() to cell().focus() for switching cell. KeyTable will trigger the inline editing when focus is gained.

I doubt the logic is exactly what you need, but hopefully it gives you something to go on.

Allan

Red Sniper

Hi Allan,

I confirm the change from editor.edit() to cell().focus() is what I needed.
Using edit() I re-entered the preOpen but editor.modifier() was null, so I couldn't get any data of the row and switch to the right column.

Thanks for the help!