Rank 1
Hello,
I am trying to create a function that dynamically calculates the value input by the user in each cell of the row through kendo grid.
When the user enters a value in a specific cell, we want the calculation to be made in the save event function bound to the grid.
However, if you try to apply the calculated value to each cell through e.model.set, the save event continues to occur.
Uncaught RangeError: Maximum call stack size exceeded
I am getting the above error.
Any other methods or advice for doing this?
Directly assigning values to dataItem requires refresh() , so it loses focus and is difficult to use.
Below is the code for example.
Please reply.
thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.default-v2.min.css" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.914/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2021.3.914/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.914/js/jszip.min.js"></script>
</head>
<body>
<div id="testGrid"></div>
<script>
function grid_save(e) {
if (e.values.A >= 0 || e.values.A <= 0) {
e.model.set("A", e.values.A);
e.model.set("B", e.model.C - e.values.A);
e.model.set("C", e.values.A + e.model.B);
e.model.set("STATUS", "MODIFY");
}
// B
else if (e.values.B >= 0 || e.values.B <= 0) {
e.model.set("B", e.values.B);
e.model.set("A", e.model.C - e.values.B);
e.model.set("C", e.model.A + e.values.B);
e.model.set("STATUS", "MODIFY");
}
// c
else if (e.values.C >= 0 || e.values.C <= 0) {
e.model.set("C", e.values.C - e.model.A);
e.model.set("STATUS", "MODIFY");
}
}
$("#testGrid").kendoGrid({
columns: [
{ field: "A" },
{ field: "B" },
{ field: "C" },
{ field: "STATUS" }
],
dataSource: {
data: [
{ id: 1, A: 0, B: 0, C: 0, RESULT: "READY" }
],
schema: {
model: { id: "id" }
}
},
editable: true
});
var testGrid = $("#testGrid").data("kendoGrid");
testGrid.bind("save", grid_save);
</script>
</body>
</html>1 Answer, 1 is accepted
Hi, Jayuob
Thank you for the provided code snippet.
You should avoid executing the set() method in dataBinding events such as dataBound, save, etc. In this case it is best to use the cellClose event instead.
Dojo example:
https://dojo.telerik.com/@gdenchev/EyUQiHuX
Best Regards,
Georgi Denchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.