Adding a field (checkbox) to the remove form

dynasoft

Hi

I'm trying to add a checkbox to the remove editor form but I can't see howt thats done. I tried this for ex., but the field isn't showing:

var editor2 = new $.fn.dataTable.Editor({...}).add( {
    type:  "checkbox",
    label: "Locations:",
    name:  "locations",
    options: [
        { label: "Edinburgh", value: 51 },
        { label: "London",    value: 76 }
    ]
} );

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @dynasoft ,

I don't believe that's possible. You can change the message, see here, but you can't created editable fields - there's no point, since the record is going to be deleted.

What's the use case for wanting to do this?

Cheers,

Colin

dynasoft

Hi

It's useful to have that as the data is ketpt elsewhere in the db and we would like to offer the user the ability to choose if they want to delete that other data too. Maybe it can be done via a confirmation box with 3 options: delete only data at hand, delete that data + the other data or ignore/cancel dialogue box?

colin

Hi @dynasoft ,

I see. One thing you could do is have another Editor instance, similar to this example here. In your case, you could have a custom button that generates a different edit form with those checkboxes, which after submission, you call remove().

Hope that helps,

Cheers,

Colin

dynasoft

Hi

Thanks. I have modified the code Please see below:

        var editor2 = new $.fn.dataTable.Editor({

            destroy: true,
            ajax: {
                url: '/DDIs/CRUDDDIs/',
                type: 'POST',
                async: true,
                cache: false
            },
            table: '#tblDataTable',
            fields: [ {
                    type:  "checkbox",
                    name:  "DeleteDDICustomerAccount",
                    options: [
                        { label: '@(lblo.lblDeleteDDICustomerAccount)', value: 1 }
                    ]
                }
            ],
            i18n: {
                create: {
                    button: '@(lblo.lblDelete)',
                    title: '<b>@lblo.lblProductNameLong' + ' - ' + '@(lblo.lblDeleteEntry)</b>',
                    submit: '@(lblo.lblDelete)'
                },
                remove: {
                    button: '@(lblo.lblDelete)',
                    title: '<b>@lblo.lblProductNameLong' + ' - ' + '@(lblo.lblDeleteEntry)</b>',
                    submit: '@(lblo.lblDelete)',
                    confirm: {
                        _: '@(lblo.lblConfirmPermanentAction)',
                        1: '@(lblo.lblConfirmPermanentAction)'
                    }
                },
                error: {
                    system: '@(lblo.lblError5)'
                }
            }
        });

        var dataTable = $('#tblDataTable').DataTable( {

            order: [[0, 'desc']],
            columnDefs: [
                { 'bVisible': false, 'targets': 0 }
            ],
            dom: 'Bfrtip',
            ajax: {
                url: '/DDIs/CRUDDDIs/',
                type: 'GET',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                async: true,
                cache: false
            },
            columns: [
                { data: 'id' ,
                    className: 'text-left'
                }
            ],
            select: true,
            buttons: [
                { extend: 'create', editor: editor1 },
                { extend: 'edit', editor: editor1 },
                //{ extend: 'remove', editor: editor2 },
                {
                    extend: 'remove',
                    editor: editor2,
                    text: '@(lblo.lblDelete)',
                    className: 'btn btn-default buttons-selected buttons-remove',
                    action: function (e, dt, node, config) {
                        editor2.create( {
                            title: '<b>@lblo.lblProductNameLong' + ' - ' + '@(lblo.lblDeleteEntry)</b>',
                            submit: '@(lblo.lblDelete)',
                            buttons: [
                                { extend: 'remove', editor: editor2 }
                            ],

                        } );
                    }
                }
            ]
        });

I get the form below:

I'd like to be able to place some text between the 2 horizontal line and a (red) delete button where the arrow points to but I'm not sure how to achieve this. Many thanks.

allan

I don't think that will work as you are thinking. That is coring a create rather than a delete, which is effectively going to just duplicate the row. There is no delete action going to be performed there.

The key thing to do here is to add a little bit of information in what is sent to the server. The preSubmit method is the way to do that - e.g.

editor.on('preSubmit', function ( e, data, action ) {
  if ( action === 'remove' ) {
    data.deleteRelated = ...
  }
} );

Then you can use deleteRelated on the server to decide what you want to do with the other information (keep or remove).

So the next question is, how to get a value for that - the displayOrder method can be used for that. Add a check in an event handler for that for remove action, and if so then add in a custom checkbox (the Editor fields are not shown on delete). Then in your preSubmit query that checkbox to get the value.

Allan

dynasoft

Many thanks. This is helpful.