Why doesn’t dirty flag trigger after dataMap field updates with autocomplete rem

[omerix]

Hi,

I’m using jQuery UI Autocomplete in a grid cell to fetch data from a remote source.
When a user selects a value, I use a dataMap to write values from the selected item into other related fields in the same row.
The data updates in the row as expected, but the row does not get marked as dirty—so the “Save” button does not get enabled.

Here is the core of my code function:

Code: [Select]

function otoTamamlaJui(ui, opts) {
    opts = opts || {};
    var dataMap = opts.dataMap || {};
    var valueIndx = opts.valueIndx || 'id';   // value to be written to grid
    var labelIndx = opts.labelIndx || 'text'; // value to appear in popup

    // find grid and rowData first
    var activeGrid = ui.grid || opts.grid || window.grid;
    var rowData = ui.rowData;
    var oldVal = rowData[ui.dataIndx];

    // With .ui-front the dropdown remains on top
    ui.$cell.addClass('ui-front');

    // autocomplete initialization
    ui.$editor.autocomplete({
        source: function(request, response) {
            $.ajax({
                url: opts.url,
                dataType: "json",
                data: { q: request.term },
                success: function(data) {
                    var result = (data.items || []).map(function(item) {
                        return {
                            ...item,
                            label: item[labelIndx] || item.text || item.id,
                            value: item[valueIndx] || item.id || item.text
                        };
                    });
                    response(result);
                }
            });
        },
        position: {
            collision: 'flipfit',
            within: ui.$editor.closest(".pq-grid")
        },
        minLength: 1,
        delay: 0
    })
    .one('focus', function () {
        $(this).autocomplete("search", "");
    })
    .on('autocompleteselect', function (event, uiAuto) {
        var selected = uiAuto.item;
        var changed = false;

        // Update the main field with valueIndx
        var newVal = selected && (selected[valueIndx] || selected.id || selected.text);
        if (newVal != oldVal)
            changed = true;
        rowData[ui.dataIndx] = newVal;

        // fill other fields with dataMap
        for (var gridField in dataMap) {
            var itemField = dataMap[gridField];
            if (selected && selected[itemField] !== undefined && rowData[gridField] !== selected[itemField]) {
                rowData[gridField] = selected[itemField];
                changed = true;
            }
        }

        // Save only if there are changes
        if (changed && activeGrid && typeof activeGrid.updateRow === "function") {
            activeGrid.updateRow({
                rowIndx: ui.rowIndx,
                newRow: rowData,
                track: true,
                history: false,
                checkEditable: false,
                refresh: false
            });
        }
    });
}


All the relevant fields are updated in the row, but the grid doesn’t mark the row as dirty, and the “Save” button does not become enabled.
Am I missing something to ensure the dirty flag is triggered?
Is there an extra step required for this workflow to work as expected?

Thanks for any help!

colmodel:

Code: [Select]

,{title:'I.Name',dataIndx:'name',dataType:'string',minWidth:24,width: 200,cls:'',clsHead:'',align:'',halign:'center',hidden:false,editable:true
,filter: { crules: [{ condition:'contain'}],menuIcon:false}
,editor: {type: 'textbox',init: function(ui){return otoTamamlaJui(ui, {url:'/search.json',dataMap:{ktext:'text',kno:'id'} });}}, editModel:{keyUpDown: false}
}


search.json

Code: [Select]

{"totalRecords":4,"curPage":1,"items":[{"id":"1","text":"AAAAA"},{"id":"1234567890123456789012345","text":"BBBBB"},{"id":"2","text":"CCCCC"},{"id":"44","text":"DDDDD"}],"more":0}


[paramvir]

There is a problem in the way you have made changes in rowData directly and passed updated rowData to newRow parameter of updateRow method.

Code: [Select]

activeGrid.updateRow({
                rowIndx: ui.rowIndx,
                newRow: rowData, //pass new object here instead of rowData, and don't make any changes in rowData
                track: true,
                history: false,
                checkEditable: false,
                refresh: false
            });


newRow is supposed to be a new object containing only the changes in the fields you want.