I'm trying to use KENDO UI to validated 2 values in a grid row. These 2 values, HOURS and COUNT are mutually exclusive, so if they both have a value > 0, I would like to signal an error.
Two behavior issues I'm having:
- The error "Both Hours and Count are not allowed" displays, but it only triggers on the second iteration of erroneous input. Example input: Hours / Count 1 0 (good) 1 1 (should result an error) 1 2 (this fires the desired error)
- Once the error displays, I can't determine how to remove it. If I correct the data setting one of the inputs back to zero, the error remains.
I'm using function FCTest to validate, but I can only assume I need to call it again, or in a different sequence to get the timing corrected.
Thanks, Robert
My Code:
<!DOCTYPE html>
<!-- TEST -->
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing-custom-validation">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
data: [
{ id: 1, count: 1, hours: 0},
{ id: 2, count: 0, hours: 1},
],
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
id: { editable: false },
count: {editable: true,type: "number",
validation:{
required:true,
maxlength:"3",
FCValid: FCTest}},
hours: {editable: true, type: "number",
validation:{required:true,
maxlength:"2"}}}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{field: "id", title: "ID", format: "{0:c}", width: "120px"},
{field: "count", title: "Count", width: "120px"},
{field: "hours", title: "Hours", width: "120px"},
{command: ["edit", "destroy"], title: " ", width: "250px"}],
editable: "inline"
});
}); // end document ready
function FCTest(input) {
var row = input.closest("tr");
var grid = row.closest("[data-role=grid]").data("kendoGrid");
var dataItem = grid.dataItem(row);
// if (parseFloat(input.val()) <= .1) {
// input.attr("data-FCValid-msg", "Decimals not allowed");
// return false;
// }
console.log({row});
console.log({dataItem});
console.log(dataItem.hours);
console.log(dataItem.count);
if (parseFloat(dataItem.hours) > 0 && (parseFloat(dataItem.count) > 0)) {
input.attr("data-FCValid-msg", "Both Hours and Count are not allowed");
return false;
}
if (parseFloat(dataItem.hours) == 0 && (parseFloat(dataItem.count) == 0)) {
input.attr("data-FCValid-msg", "Must contain one Frequency value: Hours or Count");
return false;
}
return true;
}
</script>
</body>
</html>
CodePudding user response：
Subscribe to the cellClose, check if the incoming model is not a new row, and then check if the values meet your conditions:
cellClose: function(e) {
if (!e.model.isNew()) {
if (e.model.count > 0 && e.model.hours > 0) {
kendo.alert('Both Hours and Count are not allowed');
} else if (e.model.count == 0 && e.model.hours == 0) {
kendo.alert('Must contain one Frequency value: Hours or Count');
}
}
}