restrict editor.inline to a single column - without being able to edit the rest of the row.

restrict editor.inline to a single column - without being able to edit the rest of the row.

MSLtdMSLtd Posts: 56Questions: 5Answers: 4

At the moment I'm having an issue with the following script, in that it will only initiate the inline editor when I click: td:last-child, but once it's selected the rest of the row becomes editable:

$('#line_items').on( 'click', 'tbody td:last-child', function (e) {
        if (/*This condition returns true correctly*/){
                editor.inline( this, {scope: 'cell', onBlur: 'submit'} );
} );

I'd like to only allow it to edit the cell in the last last column, and none of the others before it in the row.

Thanks in advance!

This question has an accepted answers - jump to answer


  • allanallan Posts: 48,896Questions: 1Answers: 7,127 Site admin

    That sounds odd! Your selector makes it look like only the last column in the table should do anything when clicked on. The other cells shouldn't be click to edit unless there is something else going on.

    Are you able to give me a link to the page or show the unabridged code?


  • colincolin Posts: 3,617Questions: 0Answers: 636

    Hi @MSLtd ,

    This example here may help. It shows how to restrict which columns can be inline edited.

    I hope that helps, shout if not, and I'll try again!



  • MSLtdMSLtd Posts: 56Questions: 5Answers: 4
    edited July 2018

    @allan @colin I lied! it was mostly a logic error on my part :pensive: - turns out the functions I called from drawCallback() leaned into the conditional statement which I had speculated returned true correctly (js if(poStatus == 'Ordered'){...}) - poStatus just so happens to be controlled by the selector input in the final column :astonished:

    For some reason whenever the cell is clicked, the selector automatically sets the selected option the 'lowest' option alphabetically and then submits the change to the database (In my case it was setting the selector to 'Cancelled' which in turn set poStatus to 'Cancelled' as well... so naturally poStatus == 'Ordered' was in fact returning false and the event handler above it:

    $('#line_items').on( 'click', 'tbody td:not(:first-child)', function (e) {
        if (poStatus === "Pending" || poStatus === "Awaiting Approval" || poStatus === "Cancelled"){
            editor.inline( this, {scope: 'cell', onBlur: 'submit'} );
    } );

    was returning true - thus enabling the editing of the whole row :lol:

    Is there anyway I can prevent the selector choosing 'Cancelled' as the default, whenever the field is selected?

  • DCMsubsDCMsubs Posts: 4Questions: 1Answers: 1
    Answer ✓

    So as it turned out, I was accidentally assigning the wrong variable to the Value of the selector!

Sign In or Register to comment.