Inlline editor preOpen return false based on cell's class

capeck

I have columns that I want to be readonly depending on certain data in each row. With the datatable I use rowCallback and it works well:

 "rowCallback": function (row,data) {

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

                        }
                    }
}

Now I want to use the readonly class in the inline editor to return false. I am not sure how to get to the class for the cell (where I have question marks below). I am using preOpen .

        vm.editor.on( 'preOpen', function ( e, mode, action ) {
            var rowData = vm.dtHandle.row( vm.editor.modifier().row ).data();
            /*if (JQuery(???????).hasClass('readonly')) {     
                return false;
            } */
      
        } );

I can't figure out how to reference the cell's class from the editor preOpen . I've looked through several posts but no luck so far.

Thanks.

colin

You were close - modifier() returns a node so you can just use that:

  editor.on('preOpen', function() {
    var node = $(editor.modifier());
    return $(node).hasClass('readonly')? false : true;
  })

Please see example here,

Colin

capeck

Thanks so much. What I'm seeing (I think) is that since I am setting the readonly class on specific cells ( not the whole node?) the

return $(node).hasClass('readonly')? false : true;

is always returning false, even though when I inspect the element it has the readonly class applied. Is there a way to get the specific cell rather than the node? Or am I misunderstanding?

colin

The node and the cell would be the same in this case. Could you update my example to demonstrate that, please, it would help us understand where your classes are.

Colin

capeck

Hi, Just edited your example. I added a console.log(node) and it seems I get something different from the example . I assume this link has my edits:
http://live.datatables.net/qeyonewo/4/edit

capeck

A little more information, when I do this it works as expected:

vm.editor.on( 'preOpen', function (  ) {
var node = JQuery(vm.editor.modifier());
 var cell = (vm.dtHandle.cell(vm.editor.modifier(), vm.editor.modifier().row).node())
return JQuery(cell).hasClass('readonly')? false : true;   

So it seems I have to get the datatable cell as opposed to the node returned from the modifier. Does that make any sense? I'd like to understand why .

kthorngren

Maybe I'm missing something but it seems Colin's example works. I updated it here to print whether the cell has the class readonly.
http://live.datatables.net/qeyonewo/6/edit

Are you just trying to stop inline editing of readonly cells? If so maybe you can just use the jQuery :not()` selector for the inline click event handler. See this example:
http://live.datatables.net/cajorogi/1/edit

Kevin

capeck

You are right that the example does work, but in mine the node doesn't return the same thing. My use is within a vue.js component, so it could be that changes something.

Yes, I'm trying to stop inline editing of readonly cells (ideally it would skip tabbing to them as well). I appreciate the suggestion on the click handler, but my understanding is that with inline editing the click event is handled internally.

Thanks.

colin

It would help if you could link to your page, or modify the example we're working with so it's behaving the same - we need to see what those 'readonly' cells are doing,

Colin

capeck

Yes, another big difference I just realized is I am using keytable and tabbing between columns. I'll work on editing example to try and recreate my issue.

capeck

Sorry to keep posting here, but I added keyTable and this to the datatable setup:

 keys: {
            columns: ':not(:first-child)',
            keys: [ 9 ],
            editor: editor,
            editOnFocus: true
    },  

to example to try and recreate my issue and it is not tabbing between fields.
http://live.datatables.net/qeyonewo/8/edit

capeck

My example now recreates the issue. This is using keyTable to tab between columns.
The hasClass('readonly') returns false here:

vm.editor.on( 'preOpen', function (  ) {
    var node = JQuery(vm.editor.modifier());
     console.log('node', node.hasClass('readonly'));
})

http://live.datatables.net/qeyonewo/9/edit

kthorngren

Interesting, with KeyTable editor.modifier() seems to return the cell's meta data:

{row: 24, column: 1, columnVisible: 1}

This can be used as the cell-selector for the cell() API to get the cell().node(). See the updated example:
http://live.datatables.net/qonulesi/1/edit

@allan or @colin will need to explain why the difference.

Kevin

allan

The modifier() method can be a slightly tricky one since it just returns whatever was used to trigger the editing (e.g. what was passed to edit(), inline(), etc). Using that method you'd need to cope with a whole bunch of different options, such as the KeyTable triggered inline editing which uses a cell() selector (which is why it has the columnVisible attribute).

What I would suggest instead is that you use the ids() method instead. Then you can do something like:

  editor.on('preOpen', function() {
    var row = table.row( editor.ids(true)[0] );

    return $(row.node()).hasClass('readonly')? false : true;
  });

Note I've only got it checking a single row, which might be enough for your use case.

Updated example here: http://live.datatables.net/qeyonewo/11/edit (note that when using KeyTable you don't need to call inline() yourself).

Allan

allan

Colin has just pointed out to me that you wanted to check the class on the cell, not the row (oops - I got confused about the use of rowCallback - sorry).

Kevin's example without the click event listener to inline() should do it: http://live.datatables.net/qonulesi/2/edit

Allan

capeck

Thanks, looks like I can piece it together from this. Really appreciate the help!