Thanks Jarry for your suggestion, will try it out. I was looking for a generic solution without having to adjust dozens of editors. I have in between extended the datagrid methods and overwritten the standard 'validateRow':
$.extend($.fn.datagrid.methods, {
validateRow: function(jq, index){
return gordisExtendedValidateRow(jq[0], index);
}
});
$.fn.combobox.defaults = $.extend({}, $.fn.combobox.defaults, {
validateSelection: true
});
/**
* Overwritten validateRow method of easyui to perform additional validation.
* Here, the combobox editors are validated to ensure a valid selection from its list is made.
*/
function gordisExtendedValidateRow(target, index){
const tr = $.data(target, 'datagrid').options.finder.getTr(target, index);
if (!tr.hasClass('datagrid-row-editing')){
return true;
}
const vbox = tr.find('.validatebox-text');
vbox.validatebox('validate');
vbox.trigger('mouseleave');
const invalidbox = tr.find('.validatebox-invalid');
let result = invalidbox.length === 0;
if (result) {
// Now check if combobox editors contain valid selection
const editors = $(target).edatagrid('getEditors', index);
for(let i=0; i<editors.length;i++) {
const editor = editors[i];
if (editor.type === 'combobox') {
const comboEditor = $(editor.target);
if(comboEditor.combobox('options').validateSelection === true &&
textNotEmpty(comboEditor.combobox('getText')) && _isSelectionValid(editor.target) === false) {
comboEditor.combobox('textbox').addClass("validatebox-invalid");
result = false;
break;
}
}
}
}
return result;
function _isSelectionValid(comboboxComp) {
const c = $(comboboxComp);
const opts = c.combobox('options');
const data = c.combobox('getData');
let exists = false;
for(let i=0; i<data.length; i++){
if (c.combobox('getText') === data[i][opts.textField]){
exists = true;
break;
}
}
return exists;
}
}
The extended validation for combobox editors will be skipped if the option validateSelection is set to false.