Question

I have Editable from Datatables, what i need to do is make ‘Browser’ field editable when adding new item to table, and not editable for eg. to ‘label’ when editing. Adding is started by button and editing is started by clicking on row. So I could add something to those actions, but I don’t know if I can change type of field easy way.

ediTable({ fields: [{ name: 'Engine', type: 'select',
        selectOptions: ENGINE_OPTIONS
    },
                { name: 'Browser', type: 'text' },
                { name: 'Version', type: 'label' },
                { name: 'Platform', type: 'label' },
                { name: 'Grade', type: 'select', selectOptions: ['A', 'B', 'C', 'D', 'X'] },
                { name: 'Active', type: 'checkbox', trueValue: 'Y', falseValue: 'N'}]

code I have tried to add to button but nothing changed:

// edit the new row
emptyTable.ediTable('newRow', defaultData, { name: 'Browser', type: 'label' }); return false;

Answer 1

It turned out that one can’t change type of field but to make it editable when adding new item you can check Row parameter of onPreShowForm and then change attribute of field.

When passed Row is null we know that form is displayed to enter new row, when Row is not null then we have form displayed to modify data.

onPreShowForm: function (table, form, row) {
                $("#btn-new").addClass("ui-state-disabled");

                browserInput = $('input[name|="Browser"]');
                if (row) {
                    browserInput.addClass("ui-state-disabled");
                    browserInput.attr("disabled", "disabled");
                } else {
                    browserInput.removeClass("ui-state-disabled");
                    browserInput.removeAttr("disabled");
                }
            }