Update broke key columns?

capeck

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

kthorngren

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

capeck

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

capeck

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.

capeck

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/

kthorngren

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

capeck

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!

allan

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