Inlline editor preOpen return false based on cell's class

Inlline editor preOpen return false based on cell's class

capeckcapeck Posts: 49Questions: 12Answers: 1

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • capeckcapeck Posts: 49Questions: 12Answers: 1

    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?

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • capeckcapeck Posts: 49Questions: 12Answers: 1

    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

  • capeckcapeck Posts: 49Questions: 12Answers: 1

    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 :) .

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736

    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

  • capeckcapeck Posts: 49Questions: 12Answers: 1

    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.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • capeckcapeck Posts: 49Questions: 12Answers: 1

    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.

  • capeckcapeck Posts: 49Questions: 12Answers: 1

    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

  • capeckcapeck Posts: 49Questions: 12Answers: 1

    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

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736

    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

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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

  • capeckcapeck Posts: 49Questions: 12Answers: 1

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

Sign In or Register to comment.