Is there any way to disable Editor form buttons?

louking

I have the following code, but want different 'edit' buttons to be desensitized based on values within the form fields. Is this possible? I don't see any way to desensitize a button on a form in the button options, buttons api, etc.

Note: I'd like the buttons to be sensitized / desensitized in real time depending on current contents of the fields which are being changed by the user.

    editor.on('open', function( e, mode, action ) {
        // set buttons for create
        if ( action == 'create' ) {
            this.buttons( 'Create' );

        // set buttons for edit
        } else if ( action == 'edit' ) {
            this.buttons([
                    {
                        text: 'Resend Contract',
                        action: function () {
                            this.submit(null, null function(data) {
                                data.addlaction = 'resendcontract';
                            });
                        }
                    },
                    {
                        text: 'Mark Invoice Sent',
                        action: function () {
                            this.field( 'invoiceSentDate' ).set( currentdate() );
                            this.submit();
                        }
                    },
                    {
                        text: 'Mark as Paid',
                        action: function () {
                            this.field( 'paymentRecdDate' ).set( currentdate() );
                            this.submit();
                        }
                    },
                    {
                        text: 'Update',
                        action: function () {
                            this.submit();
                        }
                    },
                    {
                        text: 'Update and Send Contract',
                        action: function () {
                            this.submit(null, null, function(data) {
                                data.addlaction = 'sendcontract';
                            });
                        }
                    },

                ]);

        // set buttons for remove (only other choice)
        } else {
            this.buttons( 'Delete' );
        }

        return true;
    });

allan

Hi,

It is possible, but its a little bit of a workaround. Basically you would need to use the buttons() API method to create new buttons based on whatever conditional logic you have. There isn't currently a way to update the existing buttons as they don't each have their own API methods.

If a button is to be disabled, then it should have a noop action function and a class such as "disabled" on the button (className property) to be able to visually style it as disabled (or really noop in this case).

Allan

louking

I think you mean the buttons() api, right?

I think that would work based on the values of the fields when the form is brought up, but not if the field values change while the form is active.

What's the best way to add a change function for the fields which affect the buttons? I think probably using https://editor.datatables.net/reference/api/field().node() -- that finds the field container, right?

I also need to find the button to add/delete "disabled" class within the field change handler.

allan

I did indeed - sorry. Typo fixed . Note that it is Editor's buttons() method I'm referring to here. The Buttons extension puts a method by the same name on the DataTables API chain.

What's the best way to add a change function for the fields which affect the buttons?

dependent() probably.

I also need to find the button to add/delete "disabled" class within the field change handler.

Yes - its not so much as finding them in the DOM, since as I mentioned its a case of rebuilding them completely. I'd suggest having a function that you can call which parameters to match the various options for the states the buttons can be in.

Allan

louking

For anyone else who finds this, here's some example code, including the call to dependent() and handling the form open. (but note https://datatables.net/forums/discussion/53040/dependent-doesnt-fire-for-field-where-type-date)

afterdatatables() is called after datatables and editor are initialized, and this and that variables are simply the editor instance.

// configure form buttons
function configurebuttons( that, action ) {
    // set buttons for create
    if ( action == 'create' ) {
        that.buttons( 'Create' );

    // set buttons for edit
    } else if ( action == 'edit' ) {
        // is current state selection in ['committed', 'contract-sent']?
        var contractsent = ['committed', 'contract-sent'].includes( that.field( 'state.id' ).inst('data')[0].text );
        that.buttons([
                {
                    text: 'Resend Contract',
                    className: ( that.field( 'contractDocId' ).get() ) ? 'enabled' : 'disabled',
                    action: function () {
                        if ( that.field( 'contractDocId' ).get() ) {
                            that.submit(null, null, function(data) {
                                data.addlaction = 'resendcontract';
                            });
                        }
                    }
                },
                {
                    text: 'Mark Invoice Sent',
                    className: ( that.field( 'invoiceSentDate' ).get() ) ? 'disabled' : 'enabled',
                    action: function () {
                        if ( ! that.field( 'invoiceSentDate' ).get() ) {                 
                            that.field( 'invoiceSentDate' ).set( currentdate() );
                            that.submit();
                        }                    
                    }
                },
                {
                    text: 'Mark as Paid',
                    className: ( that.field( 'paymentRecdDate' ).get() ) ? 'disabled' : 'enabled',
                    action: function () {
                        if ( ! that.field( 'paymentRecdDate' ).get() ) {                 
                            that.field( 'paymentRecdDate' ).set( currentdate() );
                            that.submit();
                        }
                    }
                },
                {
                    text: 'Update',
                    action: function () {
                        that.submit();
                    }
                },
                {
                    text: 'Update and Send Contract',
                    className: ( contractsent ) ? 'disabled' : 'enabled',
                    action: function () {
                        if ( ! contractsent ) {
                            that.submit(null, null, function(data) {
                                data.addlaction = 'sendcontract';
                            });
                        }
                    }
                },

            ]);

    // set buttons for remove (only other choice)
    } else {
        that.buttons( 'Delete' );
    }
}

// set up buttons for edit form after datatables has been initialized
function afterdatatables() {
    editor.on('open', function( e, mode, action ) {
        // set up the buttons
        configurebuttons( this, action );

        return true;
    });

    // regenerate the edit buttons if certain fields change
    editor.dependent([ 'state.id', 'contractDocId', 'invoiceSentDate', 'paymentRecdDate' ], function( val, data, callback ) {
        configurebuttons( editor, editor.mode() );
        return {};
    });
}

allan

Very nice - thanks for sharing that with us.

Allan