How to use AutoClose with Inline Editor dropdown select

How to use AutoClose with Inline Editor dropdown select

HollyLHollyL Posts: 10Questions: 2Answers: 0

This is my dropdown editor field:

            {
                "data": "LASTLOAD", //Last Load
                type:  "select",
                options: [
                    { label: "No ", value: "N" },
                    { label: "Yes",  value: "Y" }
                ],
                render: function ( data, type, row, e) {
                    lastopt = '';
                    if ((row.LASTLOAD) === 'Y'){
                        lastopt = 'Yes';
                    }
                    else {
                        lastopt ='No';
                    }
                    return lastopt;
                }

            },

This is logic that is submitting data.

// Activate an inline edit on click of a table cell
$('#agbfrep').on( 'click', 'tbody td:not(.child)', function (e) {
    // Ignore the Responsive control and checkbox columns
    if ( $(this).hasClass( 'control' ) || $(this).hasClass('select-checkbox') ) {
        return;
    }

    editor.inline( this, {onBlur: 'submit',

    submit: 'allIfChanged'} );
} );

Description of problem:

When using Inline Editor, are you able to autoClose the dropdown select option and submit once they make a change instead of having to click somewhere outside the div? Note: I am using bootstrap.

Replies

  • allanallan Posts: 57,286Questions: 1Answers: 9,126 Site admin

    Yes, listen for the change event:

    editor.field('myField').input().on('select', function (e, d) {
      if (!d) {
        editor.submit();
      }
    });
    

    Note the check for the d parameter - that can be used to determine if the select action was triggered by Editor when setting up the form, or if it was the end user's change that triggered the handler. You only want to submit on the latter.

    Allan

  • HollyLHollyL Posts: 10Questions: 2Answers: 0

    Thanks for your quick response Allan. I am not quite figuring out how to add this into the inline editing.

    I tried this, but it is not submitting. I should note that I actually have 2 editable fields, one is dropdown select, and one is text input.

    //Activate an inline edit on click of a table cell
    $('#agbfrep').on( 'click', 'tbody td:not(.child)', function (e) {
        // Ignore the Responsive control and checkbox columns
        if ($(this).hasClass( 'control' ) || $(this).hasClass('select-checkbox') ) {
            return;
        }
    
        editor.inline(this).input().on('select', function (e, d) {
            if (!d) {
              editor.submit();
            }
          });
    } );
    

    Or how would I incorporate the field names into the inline editing?

    Do you have an examples of this?

  • allanallan Posts: 57,286Questions: 1Answers: 9,126 Site admin

    editor.inline(this).input().on should be giving a Javascript error I think, since there is no input() method on the object returned by inline().

    Do:

    editor.field('myField').input().on('select', function (e, d) {
      if (!d) {
        editor.submit();
      }
    });
    
    $('#agbfrep').on( 'click', 'tbody td:not(.child)', function (e) {
        // Ignore the Responsive control and checkbox columns
        if ($(this).hasClass( 'control' ) || $(this).hasClass('select-checkbox') ) {
            return;
        }
     
        editor.inline(this);
    } );
    

    i.e. just add the event handler once.

    Allan

  • HollyLHollyL Posts: 10Questions: 2Answers: 0

    Thanks Alan, it is still not submitting. Working on creating a jsbin to create example. Cannot quite get the editor to work in jsbin if you are able to take a look.

    http://live.datatables.net/lejimapa/3/edit

  • allanallan Posts: 57,286Questions: 1Answers: 9,126 Site admin

    Here we go: http://live.datatables.net/yebitegi/1/edit

    I had to change a few things like the number of columns defined, but that shows it working now.

    Allan

  • HollyLHollyL Posts: 10Questions: 2Answers: 0

    Are you able to use editor.dependent along with these on change. I can't seem to get them to work together.

    http://live.datatables.net/yumiyazo/2/edit

  • allanallan Posts: 57,286Questions: 1Answers: 9,126 Site admin

    Try this: http://live.datatables.net/yumiyazo/3/edit . I've got it setting the salary in the callback now. In all honesty I'm not sure why using the field().set() there didn't work. I will dig into that, but for now, use the callback object to control the form.

    Allan

  • HollyLHollyL Posts: 10Questions: 2Answers: 0

    How do I add back the logic to the callback? So if office = London, salary is 500.

  • allanallan Posts: 57,286Questions: 1Answers: 9,126 Site admin

    Just to close this thread off - we've got this discussion going via e-mail so we'll continue there :)

    Allan

Sign In or Register to comment.