Different data between form and table

johnblythe

Hey Alan,

Working on something that is closely related to the example here (https://editor.datatables.net/examples/advanced/tableOnlyData.html) and its inverse. The difference is that I need some overlapping fields between the two and then unique fields between the two.

The editing of an item can be done inline in the table. One of the options in a Select2 field (allows users to select a product from their catalog) is "Create New." On click I'm having it not submit the editor data but rather create().open()

How can I account for Editor's fields option needing 1) the new item entry form's fields, 2) the table's inline editing fields?

Thanks for any thoughts-

allan

1) the new item entry form's fields

As in you need to add a new field to the form? The add() method can be used to do that.

2) the table's inline editing fields?

I think you'll need to use the columns.editField option to tell Editor what field to edit for the column - otherwise you might edit the wrong field or get an error message about it not being able to determine what field to edit.

Allan

johnblythe

Thanks, Alan.

My understanding of the above doesn't seem to solve things. On click of the "Create New" option in Select2 I'm kicking off the new item Editor form:

onChange: function(e) {
                    if (e.val.indexOf('#CRVID#NEW') != -1) {
                        editor
                            .create()
                            .title("Create New Product")
                            .hide();
                        for (var i = 0; i < newFields.length; i++) {
                            editor.add({
                                label: newFields[i].label,
                                name: newFields[i].name
                            });
                        }
                         editor
                            .buttons("Create")
                            .open();
                    }

The newFields array has all of the fields I'd want and need to create a new product. These fields are different in some cases than the Datatable's fields, but also has some that are the same.

To avoid confusion and complexity, though, I just gave all of the newFields fields different name properties. My hope was simply to subdivide the work and thus avoid conflicts. Allow inline to handle what's loaded in DT and the new product form to communicate with the server and then use the returned json to fill in the row being edited w the new information.

The form shows up great now...but only the first time :\ After that it has a conflict because it's adding fields of the same name. As a result, I've also attempted to get things taken care of by hiding all fields and then showing just those that I want. This fails bc of the fields not existing in the Datatable data.

I'm beginning to think that if there is a solution it will ultimately be too hacky to be worthwhile and that a custom solution of sorts is required. Would you agree or have any insight on how to get this accomplished?

allan

The form shows up great now...but only the first time :\ After that it has a conflict because it's adding fields of the same name.

Can you simply check to see if the field is present before adding it? The field() method should let you do that, or order().

You could also remove the added field using clear() when the form is closed (close) if you want the user to be able to add it again in future.

Allan

johnblythe

This looks promising. Going to try it out and report back.

johnblythe

beautiful!

the select2's onChange:

if (e.val.indexOf('#CRVID#NEW') != -1) {
                        _submitOnBlur = false;
                        var showFields = [];
                        editor
                            .create()
                            .title("Create New Product")
                            .hide();
                        for (var i = 0; i < newFields.length; i++) {
                            showFields.push(newFields[i].name);
                            editor.add({
                                label: newFields[i].label,
                                name: newFields[i].name
                            })
                        }
                         editor
                            .show(showFields)
                            .buttons("Create")
                            .open();
                    }

and the editor.close:

for (var i = 0; i < newFields.length; i++) {
                if (typeof editor.field(newFields[i].name) == 'undefined') return false;
                editor.clear(newFields[i].name);
            }
            editor.show();

Thanks!