Hello,
We have a batch-edit in-cell edit grid with various validation rules. Because it is in-cell, we have manually implemented validation of our rules in the SaveChanges event as can be seen in the following example:
https://feedback.telerik.com/kendo-jquery-ui/1359255-grid-new-row-validation-when-in-cell-edit-mode
https://dojo.telerik.com/OjuViFub
saveChanges:
function
(e) {
e.preventDefault();
var
grid = e.sender;
var
data = grid.dataSource.data();
var
validationPassed =
true
;
data.forEach(
function
(e, i){
if
(e.dirty || e.id ===
null
) {
var
uid = e.uid;
var
row = grid.element.find(
"tr[data-uid="
+ uid +
"]"
);
var
tds = row.find(
"td"
);
tds.each(
function
(i, e) {
grid.editCell(e);
if
(grid.editable) {
var
valid = grid.editable.validatable.validate();
if
(!valid) {
validationPassed =
false
;
return
false
;
}
}
});
}
});
if
(validationPassed) {
grid.dataSource.sync();
}
}
});
It loops through each cell on save, entering edit mode to render the input, and running the validation on the input. The issue with this is that one of our custom validation rules is that one of two columns are required (i.e. A XOR B - you must enter a value for one of them, but not both). The issue arises in the fact that the above manual validation loops through each cell, left to right, top row to bottom.
For reference, here is the custom validation rule:
(
function
($, kendo) {
$.extend(
true
, kendo.ui.validator, {
rules: {
AorBRequired:
function
(input, params) {
if
(input.is(
"#ColumnA"
) || input.is(
"#ColumnB"
)){
var
grid = input.closest(
".k-grid"
).data(
"kendoGrid"
);
var
dataItem = grid.dataItem($(
".k-grid-edit-row"
));
input.attr(
"data-AorBRequired-msg"
,
"You must enter A or B"
);
//Compare input value of A to dataItem value of B and vice-versa
//In-cell grid only allows us to enter edit for one cell at a time thus we cannot compare two inputs directly
if
(input.is(
"#ColumnA"
)) {
return
!($(
"#ColumnA"
).val() ===
''
&& dataItem.ColumnB ===
null
);
}
else
if
(input.is(
"#ColumnB"
)) {
return
!($(
"#ColumnB"
).val() ===
''
&& dataItem.ColumnA ===
null
);
}
}
return
true
;
}
},
messages: {
customrequired:
function
(input) {
return
input.attr(
"data-val-customrequired"
);
},
AorBRequired:
function
(input) {
return
input.attr(
"data-val-AorBRequired"
);
}
}
});
})(jQuery, kendo);
Because of this, if the user leaves both columns A and B empty, the validation stops on column A (since it appears to the left of B, and the validation reaches it first). Now, the grid is "stuck" in this cell, and the user cannot leave it until they enter a value.
This is problematic, because perhaps the user wanted to enter column B and forgot, but now they are stuck inside the cell for column A. Now they must enter a value for column A so they may leave the cell, cancel all changes, and re-add the record.
Given this information, is there an alternative/work-around to enforce this 'Column A XOR B is required' validation rule whilst using in-cell grid editing with the manual save changes loop logic, which does not result in the described unwanted behaviour?