Editor with autocomplete column - issue when user select an item by clicking it

Infolabs

Hello,
i'm using inline editing with autocomplete.
All works fine, except when the user select an item in the autocomplete dropdown menu.
In this case the resulting value (in the cell) when inline editor closes is the partial text the user have typed to find elements.

I'm using following versions:
datatables 1.10.25
editor 2.0.4
jQuery UI - v1.12.1

Any suggestion? Thanks!

allan

I suspect it might be that the owns method for the plugin might not be picking up the input element (description of the methods for plugins here). Can you give me a link to your page so I can check it out?

Allan

Infolabs

Thanks Allan, my configuration was wrong, now it's working.
In any case, I'm not very satisfied with how autocomplete works...
In the "opts" parameter of my editor field I specified the parameters I normally use for "stand alone" autocomplete, including "select" and "change".
The problem, however, is that the "change" is not triggered when the user enters the field and writes a random text, which does not correspond to any entry; this way I can't "clean up" the row of my datatable.
Do you have any suggestions or complete examples that we can use as inspiration?
I read in various discussions that you advise against the use of autocomplete, in favor of select2.
Is there any complete example on how to integrate a select2 (with dynamic list, populated via ajax, based on the text entered by the user)?
Thank you very much

allan

A complete example of use of the plug-ins is something I need to introduce. I haven't thus far because the plug-ins aren't available to non-license holders, but that is really secondary to getting them working for license holders. Apologies. It will be some weeks before I can get to that due to other development commitments at this time though.

jQuery UI auto complete is fine as long as your label and value are the same. If you want to show a different label to the end user from the value (i.e. a left joined primary key number), then it becomes tricky - possible, but tricky.

Do you have different label / values? If so, consider using Select2. If not, stick with jQuery UI.

The problem, however, is that the "change" is not triggered when the user enters the field and writes a random text, which does not correspond to any entry; this way I can't "clean up" the row of my datatable.

I'm not sure Select2 would trigger a change on that either, since it isn't selecting a value from a list. Are you looking to add a new value to the remote source in such a case?

Allan

Infolabs

Thanks Allan,
no, my users must select only one value from the list.

allan

Right, but are the label that is shown to the end user different from the value?

For example consider this page - there is a "Site" drop down, where the end user will see "Edinburgh" but the actual value submitted for the field is 1 (or for "London", 2, etc).

Allan

Infolabs

Thank you very much, Allan!

Infolabs

I cleaned up and fixed my code; now the "change" event is triggered when the user empties or does not select any autocomplete entries (and I proceed to empty the fields).
My editable table has 3 columns: item description, item code (read only) and quantity.
I save the information (via ajax) at a later time (executing the post of the form).

My "latest" problem now is the following.
In the autocomplete I have the description which is composed of description + code (e.g. "SCREW 17 - SCW17"), while the code is simple (e.g. "SCW17"), also because the search is based on the text entered by the user of autocomplete occurs both in the code and in the description of the items.

When the user selects an autocomplete element, I would like the description to be simple in the "description" column of the datatable, and not composed of description + code.

Everything works correctly when the user selects an element by clicking in the autocomplete dropdown (the "select" event is triggered).
However, it does not work correctly when the user types a text that corresponds to one or more entries and moves with the TAB key. Also in this case the "select" event is triggered, but in the "description" column of the datatable the string is composed of description + code (exactly as reported by my autocomplete list).

This is my editor code:

    let editor = new $.fn.dataTable.Editor({
        table: '#tblRighe',
        idSrc: 'id',  //se non specificato pare che cerchi un campo chiamato DT_RowId
        fields: [
            {
                label: 'Descrizione art.',
                name: 'desArticolo', 
                type: "autoComplete",   
                opts: {
                    autoFocus: true,
                    delay: 100,
                    minLength: 1,
                    source: function (request, response) {
                        InfoUtils.callWepApi.doGet('/api/magazzino/articoli',
                            { codAz: self.codAz, filtroCodOrDescr: request.term },  
                            response
                        );
                    },
                    select: function( event, ui ) {
                        editor.field('desArticolo').val(ui.item.descrizione);    //item description

                        let rowNr = editor.modifier().row;
                        self._dtTableElencoArt.cell(rowNr, idxColDesArt).data(ui.item.descrizione);     //item description
                        self._dtTableElencoArt.cell(rowNr, idxColCodArt).data(ui.item.codice);      //item code
                    },
                    change: function (event, ui) { 
                        if (!ui.item) {
                            editor.field('desArticolo').val('');    //empty the "item description" field

                            let rowNr = editor.modifier().row;
                            self._dtTableElencoArt.cell(rowNr, idxColCodArt).data('');  //empty the "item code" field

                            let rowData = self._dtTableElencoArt.row(rowNr).data();
                            rowData.desArticolo = "";       //empty the "item description" field
                            rowData.codArticolo = "";       //empty the "item code" field
                        }
                    }
                }
            },
            {
                label: 'Q.tà',
                name: 'qta',
                type: "numericValutaPos" // Using the custom field type
            }
        ]
    });

Thank you in advance!

allan

I'm not sure that an Editor field should be calling the DataTable update methods for cells at all to be honest. Only when the form is submitted would I expect the DataTable to be updated. For example imagine a user is filling in the form, and then decides to cancel it for whatever reason. The table shouldn't have been updated at that point. Only when the form is submitted should it be updated.

So I'm afraid I'm not convinced that cell().data() is the right thing to do there.

When you submit the form, the data returned by the server should contain the same structure for the row's data that was used to initially populate the table. Is that not happening in this case?

Allan

Infolabs

In my case, the user works in a modal window.
I would like the user changes, insertions and deletions will be mantained "in memory" (in the datatable).
Then, when the user confirm the modal window, I pupulate the object that will be send via ajax.

This is my code (datatable is "self._dtTableElencoArt").

function getDataToSave() {
let self = this;
let dibaDtoInEdit = this.entityDtoInEdit ? this.entityDtoInEdit : {};

    let dibaDtoToSave = dibaDtoInEdit;
    dibaDtoToSave.codice = $('#txtCodice', this.modalObject).val();
    dibaDtoToSave.descrizione = $('#txtDescrizione', this.modalObject).val();

    //here I populate the rows 
    let fromTlbDataRow = [];
    self._dtTableElencoArt.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
        var data = this.data();
        fromTlbDataRow.push(data);
    } );

    dibaDtoToSave.righe = fromTlbDataRow;

    return dibaDtoToSave;

}