How do I set "id" and "value" with autocomplete?

[ohbayashi]

Is there a smart way to ensure that IDs are set when selecting names with autocomplete?

Code: [Select]

var autoCompleteEditor_StationGroups = function (ui) {
    let $inp = ui.$cell.find("input"),
        rIndx = ui.rowIndx,
        rData = ui.rowData,
        grid = this;
    $inp.autocomplete({
        source: function(req, res) {
            res(station_groups.filter(function(item, index) {
                return (item.value).indexOf(req.term) >= 0;
            }));
        },
        selectItem: { on: true },
        highlightText: { on: true },
        autoFocus: true,
        delay: 250,
        minLength: 1,
        change: function(evt, ui) {
            rData.id = ui.item.id;                                                                           // <- 1. Dirty does not arrive.
            grid.updateRow({ rowIndx: rIndx, newRow: { "id": ui.item.id }});     // <- 2. Dirty does not arrive.
            grid.refreshCell({ rowIndx: rIndx, dataIndx: "id" });
        }
    }).focus(function () {
        //open the autocomplete upon focus
        $(this).autocomplete("search", "");
    });
}


Code: [Select]

{ title: "ID", dataIndx: "id", editable: false, minWidth: 80, maxWidth: 80, align: "center", cls: "pq-col-editable-false" },
{ title: "Name", dataIndx: "name", dataType: "string", minWidth: 160, maxWidth: 160,
    editor: {
        type: "textbox",
        init: autoCompleteEditor_StationGroups,
        // mapIndices: { "id": id, "name": name }   // 3. <- Become an error.
    },
    editModel: { keyUpDown: false },
    // getData: function (ui) {
    //     this.refreshCell({ rowIndx: rIndx, dataIndx: "station_group_id" });
       
    // postRender: function (ui) {
    //     this.refreshCell({ rowIndx: ui.rowIndx, dataIndx: "station_group_id" });
    // }
},

1. 2. 3. None of them was useless.

[paramvir]

it could be done with beforeValidate event. In this event

1. look out for ui.rowList[].newRow.name,

2. find the corresponding id to the name,

3. add it to ui.rowList[].newRow.id

ui.rowList.foreach(rowObj){
  var newRow = rowObj.newRow;
  if( newRow.name !== undefined){
    newRow.id = lookup id corresponding to newRow.name
  }
});

[ohbayashi]

Thank you for replying.

I tried it with the following feeling.

Code: [Select]

beforeValidate: function (evt, ui) {
    ui.rowList.forEach(function(row) {
        if (!("rowData" in row)) { return; }
        if (row.rowData === undefined) { return; }
        if (!("newRow" in row)) { return; }

        let rData = row.rowData,
            newRow = row.newRow;
        if ("name" in newRow && newRow.name !== undefined) {
            newRow.station_group_id = rData.station_group_id;
        }
    });
},

However, when performing rollback processing, the value was not restored.

This event also fires with other actions, so it tends to be a factor of bugs,
I hope there is another plan if I can.

[paramvir]

In that case oldRow values also need to be filled.

ui.rowList.forEach( function(rowObj){
  var newRow = rowObj.newRow, oldRow = rowObj.oldRow;
  if( newRow && ("name" in newRow)){
    newRow.id = lookup id corresponding to newRow.name
  }
  if( oldRow && ("name" in oldRow)){
    oldRow.id = lookup id corresponding to oldRow.name
  }
});

[ohbayashi]

I see! I agree.
I solved it.

Thank you very much.

[ohbayashi]

It was useless if I checked it.

I challenged it, but it did not work.
The reason is that beforevalidate runs ahead of the change event of autocomplete.

[paramvir]

Could you please share a jsfiddle of what you have implemented so far.