Rebinding Of Data To Handsontable is Causing an Application To Not Responding State

Tags: #<Tag:0x00007efc6b305818>
#1

I have a Two Handsontable Created.
One For Adding and Another for Viewing it.
In Add Handsontable also their is an option to Submit the Data entered in Handsontable as well as the Viewing Handsontable also thier is an option for edit the entered data and Submit it
Problem is when I’m trying to retrieve the data in View Handson table it’s Causing an Application To Not Responding State.
I feel it’ due to the afterchange condition that I have written for Handsontable - My Assumption I’m not sure.

I just want the data to be binded without any issue and even afterchange conditions for cells which I have written should work.
What can be done for this…?

#2

Hey @prakashbhanu24

could you send a code for the project? Or maybe you can record it?
What exactly is happening and what should be the result instead?

#3

Thanks For the Replay.

Sorry The Code Can’t be shared.
But will try to make the video and Upload it.

But today i identified the cause of issue :
I.e their are certain conditions added in Cell of Handsontable Settings which is causing the application loading issue(Hanging the application/Not responding state).
If i comment the Cells Condition in Handsontable Settings The data is easily binding data to Handsontable.

But the condition written in Cells Of Handsontable Settings is very much required for validating/calculating some data.

So how can i achieve this.
I have to bind the data to Handsontable and also do that validation in Cells Section of Handsontable Settings.

#4

Maybe you’d be just copy/paste the the Cell/Cells settings?

#5 
    cells: function (row, col, prop) {
        var cellProperties = {};
        var rpn1 = '';
        var rpn2 = '';
        var rpn3 = '';
        var max_rpn = [];
        var uniqueNames = [];
        var sev_from_db = [];
        //Part A Start 
        if ($scope.Bind_Fmea_Data_for_Update.length > 0) {
            for (var i = 0; i < $scope.Bind_Fmea_Data_for_Update.length; i++) {
                if ($scope.Bind_Fmea_Data_for_Update[i].RPN != undefined) {
                    if ($scope.Bind_Fmea_Data_for_Update[i].ssev == '9') {
                        sev_from_db.push($scope.Bind_Fmea_Data_for_Update[i].ssev);
                    }
                    else {
                        rpn_from_db.push($scope.Bind_Fmea_Data_for_Update[i].RPN);
                    }
                }
            }
        }
        if (sort.length == 0 && rpn_from_db.length > 0) {
            $.each(rpn_from_db, function (i, el) {
                if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
            });
        }
        else {
            $.each(sort, function (i, el) {
                if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
            });
        }
        //Part A End

        //Part B Start
        //add from add fmea
        var temp_ssev = this.instance.getDataAtRowProp(row, 'ssev');
        var temp_rpn = this.instance.getDataAtRowProp(row, 'RPN');
        if ((prop === 'planm' || prop === 'respo' || prop === 'target_completion_date')) {

            var maxSsev = [];
            for (var i = 0; i < $scope.Bind_Fmea_Data_for_Update.length; i++) {
                maxSsev.push(parseInt($scope.Bind_Fmea_Data_for_Update[i].ssev ? $scope.Bind_Fmea_Data_for_Update[i].ssev : 0));
            }

            console.log("Array max " + parseInt(Math.max.apply(Math, maxSsev)));

            var finalMax = parseInt(Math.max.apply(Math, maxSsev));
            if (finalMax >= 9 && (prop === 'planm' || prop === 'respo' || prop === 'target_completion_date') && parseInt(temp_ssev) >= 9) {
                cellProperties.renderer = colorchange_one;
            }
            else if (finalMax <= 8 && (prop === 'planm' || prop === 'respo' || prop === 'target_completion_date') && parseInt(temp_ssev) < 9 && uniqueNames.length != 0) {

                uniqueNames = [];
                for (var i = 0; i < $scope.Bind_Fmea_Data_for_Update.length; i++) {
                    max_rpn.push(parseInt($scope.Bind_Fmea_Data_for_Update[i].RPN ? $scope.Bind_Fmea_Data_for_Update[i].RPN : 0));
                }
                $.each(max_rpn, function (i, el) {
                    if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
                });
                uniqueNames = removeElementsWithValue(uniqueNames, '0');
                uniqueNames = removeElementsWithValue(uniqueNames, '');
                uniqueNames = uniqueNames.sort(function (a, b) { return b - a });
                var num = 0;
                if (uniqueNames[2]) {
                    num = uniqueNames[2]
                } else if (uniqueNames[1]) {
                    num = uniqueNames[1];
                }
                else if (uniqueNames[0]) {
                    num = uniqueNames[0];
                }

                if (parseInt(temp_rpn) >= parseInt(num)) {
                    cellProperties.renderer = colorchange_one;
                } else if (parseInt(temp_rpn) < parseInt(num)) {
                    cellProperties.renderer = blanck_one;
                }
            }//..End else if
            else {
                cellProperties.renderer = blanck_one;
            }

        }//End If loop
        //Part B End
        return cellProperties;
    }

For Better Understanding I Have Added Part A And Part B in the Coding Section.

If i Comment Part A and Leave Part B No Issue The Data Binds Perfectly But Color Coding what i’m trying to do is not working.
If i Comment Part B and Leave Part A Issue in binding the data(Not Responding State/the Browser will hang)

This Section i’m using to highlight if a particular condition is not meet in Handsontable’s particular columns cell value.
Plz Let me know if i’m doing something wrong here…

#6

The cells method is called each time we update the table, so it looks like your settings are creating an infinite loop. If you need to update the data via cells method you can add an additional condition to check if the data has been already updated or not.
You can check how often the calls are made via afterRender() method. Just console log anything inside the hook to check when it’s called.

#7

Thanks For the replay @aleksandra_budnik
As said i checked with afterRender() method. It’s been called many times.

So What’s the possible way i can workaround with my condition that both my Part-A and Part-B Condition are executed without any issue

#8

There are many variables there so I’m not 100% sure what is called, but to avoid the infinite loop you can check if the action you want to do hasn’t been already done. Meaning if you add some data, check by calling IF if its not there in the first place.

#9

Hey @prakashbhanu24

do we have any progress here?

#10

Yes Made Some Necessary Changes. It’s Working Fine Now.
Thanks For the Support.:slightly_smiling_face:

#11

Great. Thank you for the update.

#12