Editor: Hide field in form, but have it editable in table

ionut.voda

Hi there,

I am currently evaluating Editor and I am looking to see if it fits my use case.

I have a table which will display 13 columns: 3 with string values and the other 10 with numerical values. When the users add a new line in the table, through the form, I want them to define the 3 string columns only, while the other 10 to be edited/completed inline afterwards. And the opposite: those 3 string columns I want them to be edited only through the form and not inline.

If I want to hide the 10 numeric columns from the form, I could use the editor.hide() method on initEdit and initCreate events. However, if I do so, the columns will become hidden in the inline edit as well.

Is there a way to achieve this or something close to it, at least ?

Thanks!
Ionut

allan

Hi Ionut,

I would suggest having two Editor instances on your table. Have one that is tied to a "Create" button and one that performs the inline editing. Define the fields as needed for each.

Regards,
Allan

rf1234

Simple solution: Use two different Editors with the same Data Table. No problem. If your Data Table is ajax sourced all of the Editors would have the same url. I use up to four different Editors with the same Data Table.

The other option is to use the same Editor with the form and inline in parallel. You only limit the inline editable cells and of course you can also hide other fields dynamically in the form. That also works well.

This is an example of the latter with special inline form options:

var cashFlowEditor = new $.fn.dataTable.Editor({
        ajax: {
            url: 'actions.php?action=tblCashFlow',
            data: function (d) {
                var selected = contractTable.row({selected: true});
                if (selected.any()) {
                    d.contract_id = selected.data().contract.id;
                    d.instrument = instrument;
                }
            }
        },
        table: "#tblCashFlow",
        formOptions: {
            inline: {
                submit: 'allIfChanged',
                onBlur: 'submit'
            }
        },

and the activation for inline editing for special rows (not all rows) and special columns.

// Activate an inline edit on click of a table cell
$('#tblCashFlow').on( 'click', 'tbody tr.inlineRepaymentInterest td.inlineCashFlow',
    function (e) {
        cashFlowEditor.inline( this, {
            onBlur: 'submit'
        } );
} );

You see the "onBlur" option redundantly: That was due to a bug in Editor. Might be fixed by now.

Now if you want to exclude fields from form editing you can use this:

editor.on( 'open', function ( e, type ) {
    // Type is 'main', 'bubble' or 'inline'
    if (type === 'main') {
        this.hide(['field1', 'field2']);
    } else {
        this.show(['field1', 'field2']);
    }
} );

ionut.voda

Hi rf1234,

Actually, this did the trick:

editor.on( 'open', function ( e, type ) {
    // Type is 'main', 'bubble' or 'inline'
    if (type === 'main') {
        this.hide(['field1', 'field2']);
    } else {
        this.show(['field1', 'field2']);
    }
} );

Thanks!