Full row edit works, but inline edit does not, on setup with per-row Field type and local data

payemaster

Link to test case:

I'm unable to provide one due to https://datatables.net/forums/discussion/81470. Pending that, I have included hopefully useful info below.

Debugger code (debug.datatables.net):

Error messages shown:

None.

Description of problem:

I am using DataTable and the Editor, with Bootstrap 4. COnfiguration is:

DataTables 2.3.4, Editor 2.5.0, AutoFill 2.7.1, Buttons 3.2.5, Column visibility 3.2.5, HTML5 export 3.2.5, Print view 3.2.5, ColReorder 2.1.2, ColumnControl 1.1.1, DateTime 1.6.1, FixedColumns 5.0.5, FixedHeader 4.0.4, KeyTable 2.12.1, Responsive 3.0.7, RowGroup 1.6.0, RowReorder 1.5.0, Scroller 2.4.3, SearchBuilder 1.8.4, SearchPanes 2.3.5, Select 3.1.3, StateRestore 1.4.3

I have a slightly unusual setup in two regards:

1. All the data in the DataTable instance is in a JS Array with 2 columns representing the "key"s and "value"s of a Python dict; there is no server involved. Although the documentation suggests that the ajax option is not required when local data is in use, I have one set as follows to convert the data into the form needed by the Editor:

       this.editor = new DataTable.Editor({
               table: tableSelector,
               idSrc: this.INDEX_KEY,
               fields: this.fields,
               //
               // Modify the data in the table without actually doing a server
               // round trip.
               //
               ajax: function(method, url, data, success, error) {
                   //
                   // Convert the object representation used by DataTables into the
                   // Array needed.
                   //
                   data.data = Object.values(data.data).map(row => this.fields.map(field => row[field.name]));
                   success(data);
               }.bind(this),
           });
   

2. The first "key" column has field.type = "readonly". The second "value" column starts off as a "text" but because each row has a different type, I have the following event handler which updates the "value" column's field to give it an appropriate type when a row is clicked:

       this.dt.dtApi.on("click", "tbody td", function (e) {
               const [key, value] = dicteditor.dt.dtApi.data()[this._DT_CellIndex.row];
               //
               // Replace the value field with one which is type aware. Note
               // that we just leave the replacement in place till next time.
               //
               const field = Object.assign({}, dicteditor.fields[dicteditor.INDEX_VALUE]);
               if (/^-{0,1}\d+(\.{0,1}\d*)$/.test(value)) {
                   field.type = "text";
                   field.attr = {type: "number"};
               } else if (value === "true" || value === "false") {
                   field.type = "checkbox";
                   field.options = [{label: '', value: "true"}];
                   field.separator = '';
                   field.unselectedValue = "false";
                   ...
               } ...more of the same...
               }
               //
               // Get value from editor and push to data source.
               //
               field.getFormatter = function (val) {
                   if (this.type !== "textarea" && this.type !== "checkbox") {
                       if (this.attr?.type !== "number") {
                           val = JSON.stringify(val);
                       }
                   } else if (this.type === "checkbox") {
                       val = val === "true" ? "true" : "false";
                   }
                   return val;
               }.bind(field);
               //
               // Set value pulled from the data source on editor.
               //
               field.setFormatter = function (val) {
                   if (this.type !== "textarea" && this.type !== "checkbox") {
                       val = JSON.parse(val);
                   } else if (this.type === "checkbox") {
                       val = this.actualValue === "true" ? "true" : "false";
                   }
                   return val;
               }.bind(field);
               dicteditor.editor.clear(dicteditor.COLUMN_VALUE);
               dicteditor.editor.add(field);
               //
               // If the value column is clicked, enable inline editing.
               //
               if (this._DT_CellIndex.column === dicteditor.COLUMN_VALUE) {
                   dicteditor.editor.inline(this, dicteditor.COLUMN_VALUE, {
                       onBlur: 'submit',
                       onComplete: 'submit',
                       onReturn: 'submit',
                       submit: 'all',
                   });
           }
           return true;
     });
   

As you can see:

1. The type detection logic is a cutdown example for the purposes of reporting the problem. But you can see how the field is updated.
2. I use getFormatter() and setFormatter() to manage the movement of data between the Editor and the DataTable.
3. I only enable inline() when the second column is the one that is clicked.

So, when the first column is clicked, I can use the Edit button to bring up the full row modal editor, and that works find in that I can view/change/update the data in the table as desired. However, when inline editing is invoked, the correctly typed field ("text", or "text"-with-"type=number", or "datetime", or "textarea", or "checkbox") is shown, and can be interacted with. But any attempt to save the value seems to be ignored. As you can see, I have set onBlur and friends.

Any pointers welcome.

P.S. I reviewed several seemingly related issues without success.

allan

Hi,

Could you try removing onComplete: "submit", please? There isn't actually a submit option documented for it, and I think that it is causing some problems - certainly in a little test case I've built it was causing issues.

What appears to be happening is that the form is still (internally) in inline mode (use display() to get the current state), and that blocks the call to inline() (effectively).

Thanks,
Allan