1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Grid withe combobox columns throw ej2 errors

Grid withe combobox columns throw ej2 errors

Hi there,

I have developed an application that has two combobox columns in a grid - one for selecting a company and one for selecting a person that works at the company.

The comboboxes are searchable so as you type they filter a dataset form an api and web service call to a database (for the purposes of the sample application the API call auto generates company and person names)

There are a few problems with this app though where it throws ej2 script errors.

I have Global function for catching unhandled exceptions:

$(function () {

    // Function to catch any unhandled Errors on any page

    window.onerror = function (msg, url, lineNo, columnNo, error) {

        var string = msg.toLowerCase();

        var substring = "script error";

        if (string.indexOf(substring) > -1) {

            alert('Script Error: See Browser Console for Detail');

        }

        else {

            var message = [

                'Message: ' + msg,

                'URL: ' + url,

                'Line: ' + lineNo,

                'Column: ' + columnNo,

                'Error object: ' + JSON.stringify(error)

            ].join(' - ');


            alert(message);

        }

        return false;

    };

The following error messages are caught by the unhandled exception function

#1 If you search for a company and then click the clear button on the combo box it throws an ej2 exception:

Message: Uncaught RangeError: Maximum call stack size exceeded

URL: http://solocal.com/DesktopeAccept/Scripts/ej2/ej2.min.js

Line: 1 - Column: 4778067 - Error object: {}


#2 you can also search for persons who are not associated with a company by leaving the combobox for company empty when adding a new row and just searching using the person combobox.

you then click out of that row to force an update (or click the update button in the toolbar) you will get the following unhandled exception:

Message: Uncaught TypeError: Cannot read property 'parentNode' of null

URL: http://solocal.com/DesktopeAccept/Scripts/ej2/ej2.min.js

Line: 1 - Column: 9167 - Error object: {}


Closing that alert you will sometimes get a recursive error of:

Message: Uncaught RangeError: Maximum call stack size exceeded

URL: http://solocal.com/DesktopeAccept/Scripts/ej2/ej2.min.js

Line: 1 - Column: 7386948 - Error object: {}


This usually happens if this is the first row that you are adding to the grid.


The appplication has been updated to a later version of ej2 javascript file to fix the problem of the grid header of the checkbox column not updating correctly on load

The original JS file is included in the application though - this also displays the errors mentioned above.


I would be grateful if you could take a look at this to see if the problem is of my making or if there is something that i can do to prevent these errors.


The project was too large to upload so I have made it available to download here

Cheers James




14 Replies 1 reply marked as answer
SK Sujith Kumar Rajkumar Syncfusion Team September 6, 2021 01:08 PM UTC

Hi James, 
 
Greetings from Syncfusion support. 
 
Based on the provided information we could understand that you are facing problem on rendering EJ2 Combo box to the Grid edit form dynamically. We were unable to run the shared project as it showed the following error, 
 
 
 
So we created a similar sample to replicate the problem from our end, but unfortunately could not reproduce it. You can check the below sample for reference, 
 
 
We suspect that you might be facing the problem due to referencing old script file for the EJ2 controls. So we suggest you to refer the below online cdn script link instead of the local file in your application, clear the browser cache and check if the problem is resolved, 
 
 
If problem is resolved with this, then please refer the updated local script package for the EJ2 controls. And if problem still persists then please share us the following information to validate further on this, 
 
  • Share us the video demonstration of the problem.
  • If possible try to replicate the problem in the above shared sample. It would be helpful to identify your exact problem case and provide the solution based on that.
 
Note: Instead of dynamically appending the combo box control in the Grid’s actionComplete event, we suggest you to use the Grid columns edit template functionality. More details on this can be checked in the below documentation link, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


JC James Carter September 9, 2021 09:42 AM UTC

Hi Sujith,

to fix the problem that you were getting you just need to change the properties of the project to use "IIS Express" instead of "Local IIS" in the web tab of the project properties.

Anyway changing the reference i still get errors  https://cdn.syncfusion.com/ej2/dist/ej2.min.js 


I have uploaded a new version that is configured to use IIS Express. Steps to reproduce the problem

  1. Type ABC into the company dropdown to initiate a search
  2. Now select any of the results and then click the clear Icon
  3. You will get the unhandled error alert
  4. The little spinner remains over the clear icon
ConsoleErrorAlert.JPG

ConsoleErrormessages.JPG
SpinnerRemains.JPG

Many thanks for your time. I will now look ate your proposed solution for changing to using the Cell Edit Template instead.

Cheers James

RS Rajapandiyan Settu Syncfusion Team September 10, 2021 09:56 AM UTC

Hi James, 

Thanks for your update. 

We can reproduce the reported behavior (“Maximum call stack size exceeded”) by following the steps as you suggested. Currently, we are validating this at our end. So, we will update the further details on or before Sep 14th 2021. 

We appreciate your patience until then. 
  
Regards,  
Rajapandiyan S  


JC James Carter September 23, 2021 09:02 AM UTC

Hi  Rajapandiyan,

do you have an update on this problem as of yet?


Cheers James


RR Rajapandi Ravi Syncfusion Team September 27, 2021 03:48 PM UTC

Hi James, 

We are forwarded this query to our corresponding team, and we need some more time to validate. So, we will update you the details on Thursday 30th Sep 2021. Until then we appreciate your patience. 

Regards,
Rajapandi R 


RR Rajapandi Ravi Syncfusion Team September 30, 2021 02:55 PM UTC

Hi James,  

Thanks for your patience 

Clearing the autocomplete value with empty datasource causes this issue. Hence, we suggest you assign the selected custom value to the datasource to resolve it. Kindly refer to the following code  

[SubmitDocumentForm.js]  
function CompanyChange(args) {  
    if (args.itemData != null) {  
        this.dataSource = [args.itemData];  
        SelectedCompany = args.itemData.Id;  
        //load all persons into the combo  
        model.clientModel =  
            {  
                ContactId: SelectedCompany,  
                ContactSearchString: ''  
            };  
. . . . . . . . . . . . . . . . . .  
}  

Rajapandi R 



Marked as answer
JC James Carter October 1, 2021 08:35 AM UTC

hi Rajapandi,

I will amend the code accordingly next week, many thank for this suggestion


Cheers James


RR Rajapandi Ravi Syncfusion Team October 4, 2021 06:57 AM UTC

Hi James, 

Thanks for the update 

We will wait to hear from you. 

Regards, 
Rajapandi R 


JC James Carter replied to Rajapandi Ravi October 5, 2021 09:52 AM UTC

Hi Rajapandi,

your suggestion seems to have fixed the problem on the original application so thanks for that.


Cheers James


RR Rajapandi Ravi Syncfusion Team October 6, 2021 08:20 AM UTC

Hi James, 

We are happy to hear that you have found the solution at your end. 

Please get back to us if you need further assistance. 

Rajapandi R 



JC James Carter replied to Rajapandi Ravi October 12, 2021 01:09 PM UTC

Hi Rajapandi,

I have found another problem with the grid and have created another fully stripped down sample app for you: which you can download here

The error is only in the IE browser though but comes up when the Add button is clicked.

Many thanks in advance

James

IEErrorMsg.JPG



RR Rajapandi Ravi Syncfusion Team October 13, 2021 12:35 PM UTC

Hi James, 

Thanks for the update 

We have checked your shared application and we are able to reproduce your reported problem at our end. To resolve the problem, we suggest you use the below latest polyfill link in your application. Please refer the below code example and video demo for more information. 
 
Layouts.cshtml 
 



Regards, 
Rajapandi R 


JC James Carter October 14, 2021 08:47 AM UTC

Thanks Rajapandi, that works a treat!! :)


RR Rajapandi Ravi Syncfusion Team October 15, 2021 05:17 AM UTC

Hi James, 

We are happy to hear that the provided solution resolved your reported problem. 

Please get back to us if you need further assistance. 

Rajapandi R 


Loader.
Up arrow icon