Update broke key columns?

Update broke key columns?

capeckcapeck Posts: 54Questions: 13Answers: 1

This used to allow tabbing to skip over readonly columns in inline editor before I updated to v2 of dataTables, and 2.12 or keytable:

keys: {
                    columns: ':not(.readonly)',
                    keys: [ 9 ],        /* tab key */
                    editor: vm.editor,
                    editOnFocus: true
                }    ,

Now the inline editor still lands on those columns when tabbing.

I updated all the extensions as well as css with bootstrap5.

Any advice?
Thanks

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951

    If you are using server seide processing possibly you have the same issue as this thread. Sounds like the fix will be in the next version of Editor.

    If this is not the issue then please provide more information. Possibly a test case showing the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Maybe update the test case in the thread I linked to show the issue.

    Kevin

  • capeckcapeck Posts: 54Questions: 13Answers: 1

    I edited your example, but when I add the readonly class to one column (position) and change the keys.columns selection it seems the editor is not active at all.
    Here is the example
    https://live.datatables.net/guwafemu/574/edit

  • capeckcapeck Posts: 54Questions: 13Answers: 1

    Sorry, I had a typo in there. Now it is working correctly.
    I use a rowCallback to set columns to readonly depending on each row. So let me try to introduce that to the example.

  • capeckcapeck Posts: 54Questions: 13Answers: 1

    I added a rowCallback function to set a readonly class on a different column and that column is still editable. The column set to readonly during datatable initialization works properly.

    https://live.datatables.net/lenamuwe/3/

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951
    edited October 31

    I'm pretty sure the column-selector only looks at the thead for matching th elements. You are applying the classname only in the tbody in rowCallback. Applying to the classname, in rowCallback, to the header does work. Updated test case:
    https://live.datatables.net/lenamuwe/4/edit

    I don't believe there is a way to have KeyTable apply focus on a cell by cell basis.

    Kevin

  • capeckcapeck Posts: 54Questions: 13Answers: 1
    edited October 31

    I see what you're saying. I just re-built my app and it seems to be close enough to what I need it to do, which is set the background color and not allow editing on a row by row basis. It tabs to the column, but disallows editing, which is fine. In case this helps anyone I am doing this to set the columns of a row based on the data:

    "rowCallback": function (row,data) {
                          if (data.station.wind == false ) {
                            for (let i = 4; i < 13; i++) {
                                JQuery('td:eq(' + i + ')', row).css("background-color", "#dad5d3");
                                JQuery('td:eq(' + i + ')', row).addClass("readonly");
    
                            }
                        }
    

    Thanks for your help!

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    I'm pretty sure the column-selector only looks at the thead for matching th elements.

    Exactly that (td are allowed in the header as well).

    Allan

Sign In or Register to comment.