Recent Posts11
Help for ParamQuery Pro / Why doesn’t dirty flag trigger after dataMap field updates with autocomplete rem
« Last post by omerix on June 24, 2025, 09:47:02 pm »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:
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:
search.json
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}