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

[John Smith]

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]

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. 

 

Sample: https://stackblitz.com/edit/react-excel-filter-7l17y8?file=index.js 

 

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]

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]

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. 

 

https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#field 

 

Regards,
Pavithra S.  

[John Smith]

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]

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. 

Sample Link: https://stackblitz.com/edit/qimjye-qdvhs8?file=index.js 

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

 

Regards, 

Thavasianand S.