Print Page - Datagrid continue editing row after negative validation check

I have a datagrid with five columns having checkbox editor. If a row is edited, at least ONE of the five checkboxes must be checked. If not, I want to inform the user "please select a checkbox" while remaining in the editing mode.

How can this be achieved? Currently, the row editing gets ended and the user has to double click to begin the editing again:

Code:

onEndEdit: function (index, rowToSave) {
                if (rowToSave.isNewRecord && atleastOneCheckboxSelected(rowToSave) === false) {
                    showSlideMsg("Please select a checkbox!");
                    return false;
                }
                ... save row ...
}

Thanks for the help.

You can define a hidden field with validatebox editor. When none of the checkbox is checked, set the validatebox editor to empty. This will prevent the datagrid from ending the editing action as the validating result is failure. Please refer to the code below:

Code:

$('#dg').datagrid({
	columns: [[
		{field:'f1',title:'title1',width:100,editor:{type:'checkbox',options:{on:'On',off:'Off'}}},
		{field:'f2',title:'title2',width:100,editor:{type:'checkbox',options:{on:'On',off:'Off'}}},
		{field:'f3',title:'title3',width:100,editor:{type:'checkbox',options:{on:'On',off:'Off'}}},
		{field:'f4',title:'title4',width:100,editor:{type:'checkbox',options:{on:'On',off:'Off'}}},
		{field:'f5',title:'title5',width:100,editor:{type:'checkbox',options:{on:'On',off:'Off'}}},
		{field:'h',title:'hidden',hidden:true,width:100,editor:{type:'validatebox',options:{required:true}}}
	]],
	onBeginEdit: function(index,row){
		var f1 = $(this).datagrid('getEditor',{index:index,field:'f1'});
		var f2 = $(this).datagrid('getEditor',{index:index,field:'f2'});
		var f3 = $(this).datagrid('getEditor',{index:index,field:'f3'});
		var f4 = $(this).datagrid('getEditor',{index:index,field:'f4'});
		var f5 = $(this).datagrid('getEditor',{index:index,field:'f5'});
		var h = $(this).datagrid('getEditor',{index:index,field:'h'});
		var c1 = $(f1.target).change(_changeHandler);
		var c2 = $(f2.target).change(_changeHandler);
		var c3 = $(f3.target).change(_changeHandler);
		var c4 = $(f4.target).change(_changeHandler);
		var c5 = $(f5.target).change(_changeHandler);
		function _changeHandler(){
			if (c1.is(':checked')||c2.is(':checked')||c3.is(':checked')||c4.is(':checked')||c5.is(':checked')){
				$(h.target).val(true)
			} else {
				$(h.target).val('')
			}
		}
	}
})

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: gordis gmbh on May 20, 2019, 09:07:55 AM