DataTables keys bind to editor

DataTables keys bind to editor

OnLogOnLog Posts: 12Questions: 4Answers: 1

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

This question has an accepted answers - jump to answer

Answers

  • OnLogOnLog Posts: 12Questions: 4Answers: 1

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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • OnLogOnLog Posts: 12Questions: 4Answers: 1

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    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

  • OnLogOnLog Posts: 12Questions: 4Answers: 1

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

  • OnLogOnLog Posts: 12Questions: 4Answers: 1
    edited April 2023

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • OnLogOnLog Posts: 12Questions: 4Answers: 1

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

Sign In or Register to comment.