How to use AutoClose with Inline Editor dropdown select

HollyL

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.

allan

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

HollyL

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?

allan

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

HollyL

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

allan

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

HollyL

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

allan

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

HollyL

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

allan

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

Allan