We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Excel-style filter: error when using Custom Filter after pressing "OK"

Thread ID:

Created:

Updated:

Platform:

Replies:

149124 Nov 15,2019 01:56 AM UTC Nov 25,2019 01:40 PM UTC React - EJ 2 5
loading
Tags: Grid
John Smith
Asked On November 15, 2019 01:56 AM UTC

Hello, 

I enabled the Excel-style filter according to the docs. This filter largely works as expected but there is an issue with the Custom Filter. After hitting "OK" below nothing happens, the UI remains as shown and the grid does not update, and an error is logged to the console. This filter does work on some columns though and I believe it could be related to null/empty cell values. Is this a known issue? I updated to the latest npm packages but the problem still exists. 

"@syncfusion/ej2-base": "^17.3.27",
"@syncfusion/ej2-react-grids": "^17.3.27",





Stacktrace:

Uncaught TypeError: Cannot read property 'ej2_instances' of null
    at t.focus (webpack:///../react-core/lib/index.js?:11)
    at e.notify (webpack:///../react-core/lib/index.js?:11)
    at t.e.trigger (webpack:///../react-core/lib/index.js?:11)
    at t.onFocus (webpack:///../react-core/lib/index.js?:11)
    at t.targetFocus (webpack:///../react-core/lib/index.js?:11)
    at t.open (webpack:///../react-core/lib/index.js?:11)
    at e.notify (webpack:///../react-core/lib/index.js?:11)
    at t.e.trigger (webpack:///../react-core/lib/index.js?:11)
    at t.open (webpack:///../react-core/lib/index.js?:11)
    at e.notify (webpack:///../react-core/lib/index.js?:11)
webpack:///../react-core/lib/index.js?:11 Uncaught TypeError: Cannot read property 'ej2_instances' of null
    at t.focus (webpack:///../react-core/lib/index.js?:11)
    at e.notify (webpack:///../react-core/lib/index.js?:11)
    at t.e.trigger (webpack:///../react-core/lib/index.js?:11)
    at t.onFocus (webpack:///../react-core/lib/index.js?:11)
    at t.targetFocus (webpack:///../react-core/lib/index.js?:11)

Pavithra Subramaniyam [Syncfusion]
Replied On November 15, 2019 09:28 AM UTC

Hi John, 
 
Thanks for contacting Syncfusion support. 
 
We have checked the reported issue at our end but it is working fine at our end with latest version. We have tried to apply the custom filter for the String column which has null values on it. Please refer to the below sample link for more information. 
 
 
Please share the below information that will be helpful for us to provide a better solution as early as possible. 
 
  1. Share the full Grid related Code.
  2. Share the exact replication procedure
  3. Ensure whether any duplicate package (like “ej2-react-grids/node-modules/@syncfusion”) is installed. If yes please delete the Syncfusion packages  and package.lock.json file and reinstall them.
  4. Please share the issue reproducible sample if possible.
 
Regards, 
Pavithra S. 


John Smith
Replied On November 18, 2019 05:03 AM UTC

Hello, 

Thanks for your reply. 

I have created a stackblitz which has the issue. The problem seems to happen when there are spaces in the object property keys. 

https://react-bxbgqa.stackblitz.io

Regards
J

Pavithra Subramaniyam [Syncfusion]
Replied On November 18, 2019 11:10 AM UTC

Hi John, 
 
Thanks for your update. 
 
We have checked the shared link but it is working fine at our end. From your update we suspect that you are using the grid column fields with spaces which is the cause of this behavior. In EJ2 Grid, the field name must be a valid JavaScript identifier, the first character must be an alphabet and should not contain any spaces and special characters.  Please refer to the below API link for more information. 
 
 
Regards,
Pavithra S. 
 


John Smith
Replied On November 22, 2019 08:42 AM UTC

Hi Pavithra, 

That makes life awkward for component users. I've tried to work around this by replacing spaces in my object keys with an underscore but the table renders no records if I do this. I can't fathom why your developers would have such a constraint on column names which often have spaces in them. It's very common in the JavaScript world to do this:

["My key"] = "My value"
 
and even:

[1] = "My Value"

These are "valid JavaScript identifiers" to just about every JS dev, except for the SF React Grid devs it seems. I will have to move to a regex solution. 

PS I think the error handling around this grid could be greatly improved. 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 25, 2019 01:40 PM UTC

Hi John, 

Thanks for your update. 

In current grid architecture there is no possible to access spaces in field name because we used Html standard JavaScript identifier in our source.  For this case, you can achieve this requirement using underscore or hyphen etc. We have prepared a simple JavaScript sample using underscore. Please refer this sample. 


In this sample, we used underscore for Customer id (Ex: Customer_ID) filed. 
 
Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon