DataTables keys bind to editor

OnLog

Hi.

I have inline editing combined with keys.
I use tab-key to tab down the "allowd" edited cells.
In "preSubmit" I would like to color row if a condition is met (add a class to the row).
This works fine _without _activating the keys. But when I activate the keys only the first row gets the added class, and **always **the first row eaven if the 3th row is being edited.

I have a testcase, but in the test case the tab-key is not functioning.
But maybe you can help me get a nice solution for this, that works with the keys activated?

https://live.datatables.net/renofusi/5/edit

OnLog

Updated link to test case: https://live.datatables.net/renofusi/7/edit

kthorngren

You need to make a more specific selector. Use the browser's inspector tool to see what is used to apply styles to the Datatables tr elements. You might find something like this:

table.dataTable tbody tr {
    background-color: transparent;
}

Update your selector to override what you find, for example:

table.dataTable > tbody > tr.DW_style_09 {
  background-color: red;
}

Updated example:
https://live.datatables.net/nomapoho/1/edit

Kevin

OnLog

Thank's alot for you answer, and for fixing the coloring. But that is not exactly the problem.

The problem is when tabing down for editing rows with keyboard. I finaly got the exaple to show what I mean. If you use the tab, and editing the "Quantity" column, you will see that only the first row gets the class, no matter if you editing the 3th row or anyone alse.
If you disable the keys, and uses the mouse to click in the column, and editing, everything is working as expected.

https://live.datatables.net/nomapoho/29/edit

kthorngren

I see when keyTable is enabled the modifier() API seems to only return the first row. @allan will need to look at that interaction.

Kevin

allan

Hi,

I think the problem is that actually the row-selector does not accept a cell index as a selector (which is what modifier() is returning in this case.

You could workaround this using:

table.row(modifier.row);

https://live.datatables.net/nomapoho/31/edit

I'll have a look at what might be involved in supporting a cell index being passed to a row-selector. I can see that possibly being used in cases such as this.

Allan

OnLog

Oh.... thank's alot. This works great!

OnLog

Just to clarify how to get edited row using editor.modifier() for anyone alse running into this problem;

IF keys: false then use this code:

editor.on('preSubmit', function (e, data, action) {
      var modifier = editor.modifier();
      var editedRow = table.row(modifier);
}

IF keys: true then use this code:

editor.on('preSubmit', function (e, data, action) {
      var modifier = editor.modifier();
      var editedRow = table.row(modifier.row);
}

-Ragnhild

allan

modifier() can return a whole number of things. It will return whatever is used to trigger the editing action (from edit(), inline() or bubble()). Since they all accept a variety of inputs, you do need to be careful and might need to use a few if statements.

Allan

OnLog

Thank's for that clarification.
I use this with inline editing. Will this be the correct way to get the row being edited?
I have experienced some strange behavior that may be because of the causes you explain.

allan

If you are using KeyTable to trigger your inline editing, then the index version (modifier.row) is the way to do it since KeyTable uses the cell().index() result.

If however you have your own call to inline() it is fairly common to just pass in the cell itself. You could change that to the index if that is what is happening.

Allan