Datatables editor DnD event and modal add/update event is called edit.

jjordaan

Hi,

I'm using datatables editor. I've created a basic modal form to handle crud as per documentation.

editor = new $.fn.dataTable.Editor( {
        idSrc: "id",
        table: "table#people",
        fields: [ 
                {
                    label: 'Order #:',
                    name: 'reading_order',
                    message: 'This field can only be edited via click and drag row reordering.'
                },
                {
                    label: "Name:",
                    name: "name",
                    type:  "string"
                }
        ]
    } );

I then proceeded to add validation.

editor
        .on( 'preSubmit', function ( e, o, action ) {
        if ( action !== 'remove' ) {
            var reading_order = this.field( 'reading_order' );
            var name = this.field( 'name' );

            // Only validate user input values - different values indicate that
            // the end user has not entered a value
            if ( ! reading_order.isMultiValue() ) {
                if (isNaN(reading_order.val())) {
                    reading_order.error( 'Please enter a numeric value.' );
                }
                
                if ( ! reading_order.val() ) {
                    reading_order.error( 'Please fill out this field.' );
                }
            }
            if ( ! name.isMultiValue() ) {
                if ( ! name.val() ) {
                    name.error( 'Please fill out this field.' );
                }
            }
              
            // If any error was reported, cancel the submission so it can be corrected
            if ( this.inError() ) {
                return false;
            }
        }
    } );

Next, I have to order the rows.

var table = $('table#people').DataTable( {
        dom: "Bfrtip",
        data: people,
        columns: [
            { data: 'reading_order', className: 'reorder' },
            { data: "name" }
        ],
        columnDefs: [
            { orderable: false, targets: [ 1 ] }
        ],
        rowReorder: {
            dataSrc: 'reading_order',
            editor:  editor
        },
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );

The problem now is, that the DnD event and the modal add/update event has the same name. Both actions are named 'edit'. I don't want to validate the entry when it is dragged. Only when it is edited in the modal. Any ideas how to achieve this?

Thanks.

Regards.
JJ

allan

Hi,

The RowReorder is actually triggered an edit since you have used rowReorder.editor to link the two together. So it is correct in saying that there is an edit happening - the data is being submitted to the server to be written to the database after all.

I'd suggest you move your validation to the server - you'd just need to duplicate your validation there anyway, since it is trivial to bypass Javascript validation (that's why there is only one example in all of Editor's examples that uses client-side validation).

If that isn't an option, you'd need to make sure that your client-side validation allows for both cases. In this case you could probably resolve it by using the formOptions.bubble option and setting its submit property to be allIfChanged so that all fields are submitted, rather than just the changed ones.

Allan

jjordaan

Thanks. You a legend man!

Removed the rowReorder.editor option and it works as expected.

The person object in the form has children, and I'm using the datatable editor feature to capture the children in the context of the parent. I simple use DataTable().data() and attach the rows to the parent fields of the form on submit. Because the children in the table have to belong to a parent. (If any of that makes sense

Getting to the server side validation now. Thanks again man. Much appreciated.

Regards.
JJ