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. Image for the cookie policy date

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

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)

5 Replies

PS Pavithra Subramaniyam Syncfusion Team November 15, 2019 01:28 AM

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. 



JS John Smith November 17, 2019 09:03 PM

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


PS Pavithra Subramaniyam Syncfusion Team November 18, 2019 03:10 AM

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. 
 



JS John Smith November 22, 2019 12:42 AM

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. 


TS Thavasianand Sankaranarayanan Syncfusion Team November 25, 2019 05:40 AM

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon