How to know the field name of the column on which the inline edit has been triggered?

How to know the field name of the column on which the inline edit has been triggered?

timothy.ctr.searcy@faa.govtimothy.ctr.searcy@faa.gov Posts: 9Questions: 7Answers: 0
edited June 2019 in Editor

Hi,

I understand that I can edit only one field in an inline edit call. On the presubmit event, I am wanting to know which column, or field is being updated. I am trying to use modifier() but it gives me the complete object. I want to know how to derive the field name from it.

Some excerpts from my code:

$('#dataTable').on('click', 'tbody td.editable', function (e) {
            editor.inline(this, {
                submit: 'allIfChanged'
            });
        });
        
        editor.on('preSubmit', function (e, o, action) {
            
            console.table(editor.modifier());

            /* Is there any api like below code?
            //console.log(editor.modifier().fieldName());
            //console.log(editor.modifier().column());
             */
            
        });

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @timothy.ctr.searcy@faa.gov ,

    You can get the row that's being edited with ids(), but not the specific cell. There are two ways you could go though. You could either get the cell with the class DTE_Inline, or, you could make a note of the cell being edited in a variable in your click event, then reference that later in the preSubmit event.

    Not ideal, but hopefully they'll do the trick,

    Cheers,

    Colin

  • stolstol Posts: 16Questions: 2Answers: 1

    I have inline editing on a few columns, but I want a confirm box for only one of them.
    This is what I did based on colins idea:
    In the click event that activated the inline editing:

    var row = $(this).closest('tr');
                    var rowData = table.row(row).data();
                    rowId = rowData['DT_RowId'];
                    editor.inline( this, {
                        onBlur: 'submit'
                    } );
    

    Then in the presubmit function:

    editor.on('preSubmit', function (e, data, action) {
                    if (action == 'edit') {
                        var submitteddata = data.data[rowId];
                        var colname = '';
                        $.each(submitteddata, function (key, value) {
                            colname = key;
                        });
                        // console.log(colname);
                        if (colname == 'topicid') {
                            if(!confirm('Are you sure you want to change the topic?')) {
                                editor.close();
                                return false;
                            }
                        }
                        else return true;
                    }
    
                });
    
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Answer ✓

    displayed is the magic function you want here. It will give a list of the field names which are currently shown by the editing instance. In the case of inline editing, that's just the single one that is editable.

    Allan

  • wadeparallonwadeparallon Posts: 64Questions: 9Answers: 0

    @allan Sorry to resurrect this issue, but I'm having the same issue, however, I'm using bubble inline edit and I am on the initEdit where displayed isn't set yet.

    My use case is I have particular column that I'll need to only GET once the column is hit. (think column has preview data, and when inline is opened, I need to get the FULL data set to show to edit via ajax and set the field val() with it)

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    You can use the node, the second parameter to initEdit - combined with row().data() you can get the fill data for that row - something like this :

      editor.on( 'initEdit', function ( e, node, data, items, type ) {
        console.log(table.row(node).data());
      });
    

    Would that do the trick?

    Colin

  • wadeparallonwadeparallon Posts: 64Questions: 9Answers: 0

    Setting the data that way going to be different than this?

        _editor.on('initEdit', function (e, node, data, items, type) {
           
            if (e.currentTarget.s.includeFields.includes("projectNotes")){
               var promise = new Promise( function ( resolve, reject ) {
                    $.ajax( {
                        url: '/Home/GetNotes?projectId='+data.projectId,
                        success: function (json) {
                            _editor.field( 'projectNotes' ).val( json );
                            resolve(); // Editor continues after this
                        }
                    } );
                } );
            }
    }
    

    My main problem was finding what was clicked. Ie, I don't need to populate this value if the column next to it was being clicked for bubble edit.

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    modifier() is possibly the method you want - it will tell you what was used to trigger the editing, which can be any of the options passed into inline(), edit(), bubble() - i.e. it might be a tr, a td a row index, a cell index or something else.

    If you know how it is being called it can be really useful though.

    Another useful method is displayed() - if you are inline editing for example, then it will just give you the field that was clicked on for editing.

    Allan

  • wadeparallonwadeparallon Posts: 64Questions: 9Answers: 0

    Another useful method is displayed() - if you are inline editing for example, then it will just give you the field that was clicked on for editing.

    Display and Displayed are both null on intiEdit

    I'll look into using modifier

Sign In or Register to comment.