grid each cell dynamic calculation question

1 Answer 30 Views
Grid
jayuob
Top achievements
Rank 1
jayuob asked on 11 Nov 2021, 06:33 AM | edited on 11 Nov 2021, 06:34 AM

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

Sort by
0
Georgi Denchev
Telerik team
answered on 15 Nov 2021, 02:09 PM

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/.

Tags
Grid
Asked by
jayuob
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or