Two Filter issues related to a grid date column

[Gene Black]

1. When filtering a Date column using filter={{ type: 'Excel' }} or filter={{ type: 'Checkbox' }} and date column has type='date' format={{ type: 'date', format: 'M/d/y' }}

The checkbox array does not initialize, it just spins.

2. When using the filter={{ type: 'Menu' }} the popup works fine in a web browser, but when in a mobile browser (or emulating a mobile browser in chrome-IPad) it cannot find the popup and crashes.

The following method cannot find an element with the value from this.POP which is 'e-filter-popup' so it returns null

ColumnMenu.prototype.getFilterPop = function () { return this.parent.element.querySelector('.' + this.POP); };

which eventually causes the error at:

ColumnMenu.prototype.filterPosition = function (e) { var filterPopup = this.getFilterPop(); >>>>filterPopup.classList.add(this.WRAP);

Uncaught TypeError: Cannot read property 'classList' of null at ColumnMenu.filterPosition (column-menu.js?cdc0:486) at Observer.notify (observer.js?80b9:89) at GridComponent.Component.notify (component.js?9a80:188) at FilterMenuRenderer.dialogCreated (filter-menu-renderer.js?19e9:87) at Observer.notify (observer.js?80b9:89) at Dialog.Base.trigger (base.js?6f2c:149) at Dialog.Component.appendTo (component.js?9a80:130) at FilterMenuRenderer.renderDlgContent (filter-menu-renderer.js?19e9:80) at FilterMenuRenderer.openDialog (filter-menu-renderer.js?19e9:32) at Filter.filterDialogOpen (filter.js?4dcd:492) ColumnMenu.filterPosition @ column-menu.js?cdc0:486 Observer.notify @ observer.js?80b9:89 Component.notify @ component.js?9a80:188 FilterMenuRenderer.dialogCreated @ filter-menu-renderer.js?19e9:87 Observer.notify @ observer.js?80b9:89 Base.trigger @ base.js?6f2c:149 Component.appendTo @ component.js?9a80:130 FilterMenuRenderer.renderDlgContent @ filter-menu-renderer.js?19e9:80 FilterMenuRenderer.openDialog @ filter-menu-renderer.js?19e9:32 Filter.filterDialogOpen @ filter.js?4dcd:492 Filter.columnMenuFilter @ filter.js?4dcd:482 Observer.notify @ observer.js?80b9:89 Component.notify @ component.js?9a80:188 ColumnMenu.getFilter @ column-menu.js?cdc0:455 ColumnMenu.columnMenuItemClick @ column-menu.js?cdc0:316 Observer.notify @ observer.js?80b9:89 Base.trigger @ base.js?6f2c:149 MenuBase.clickHandler @ menu-base.js?76b3:1034

[Pavithra Subramaniyam]

Hi Gene, 

Greetings from Syncfusion. 

We have validated your query and checked the reported problem at our end. We have checked the reported problem in chrome mobile(iPad) emulator. It works fine. Please find the sample in below link. 

Sample link: https://stackblitz.com/edit/react-cdu1vf?file=index.js  

We have also provided a video demonstration of the reported problem is not producing at our end. Please find the below video for your reference. 

Video link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/videoIPadIssue669257648  

  

If you are still facing the same problem, could you please share the below information. It will be helpful to provide a better solution. 

• Share iPad version details.
• Share full grid code.
• Share Essential Studio package version details.
• Share the reproduceable sample to us.

 

Regards, 

Pavithra S. 

[Gene Black]

First of all, thank you for such a rapid response!

OK, it looks like with issue #1 that I have is my remote data feed (since it was unable to directly emit a javascript date object) was emitting a date converted to ticks. While this converted and displayed in the grid correctly and was correctly filtered using the filter={{type: 'Menu'}} it would fail when using the the Excel or Checkbox filter as it expected it to already be a JavaScript date object at  line 93 in @syncfusion\ej2-base\src\intl\date-formatter.js version 17.1.48 (also appears to be problematic in version 17.1.49).

An example of this difference in handling of a column value in ticks vs a Javascript Date object is on a forked copy of your example at:

https://stackblitz.com/edit/react-cdu1vf-juq8ch

In that example I changed the output of your existing date conversion routine in data.js at line 24168 to output the ticks for the converted Javascript Date object. This displays properly in the grid, but when using a Checkbox or Excel filter it errs. When using a 'Menu' filter it works correctly (it is currently set to a 'Menu' filter on the ColumnDirective in that example).

The existing code is:

        return function (value) {

            if (isNaN(value.getDate())) {

                return null;

            }

            return _this.intDateFormatter(value, formatOptions);

        };

In order to not have to translate dates to a Javascript Date object in the source data (while still supporting that capability) I would propose changing that code to the following:

        return function (value) {

            if (!(value instanceof Date))

                value = new Date(value);

            if (isNaN(value.getDate())) {

                return null;

            }

            return _this.intDateFormatter(value, formatOptions);

        };

The second issue I could reproduce in your sample by changing your GridComponent filterSettings to {type: 'Menu'}

Any time the 'Menu' type filter is used it causes an error in iPad emulation or on an iPad device

https://stackblitz.com/edit/react-cdu1vf-184p7q

(make sure you refresh the page after entering into emulation mode on Chrome)

I haven't tracked down where this issue originates, but it appears to not be rendering the proper element containing the 'e-filter-popup' css class when emitting the 'Menu' popup when accessed from an iPad.

[Gene Black]

Any update to my replies?

[Pavithra Subramaniyam]

Hi Gene, 

 

Sorry for the delay in get back to you. 

 

Query# 1 

    

We have validated the provided information and we have considered “script error throws when opening excel/checkbox filter using column menu with date value as ticks”  as a bug. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle).  

If you wish to receive this fix in a specific prior release product version please contact Syncfusion Support (backwards compatibility subject to technological feasibility and our Support SLA) You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link: 

Link: https://www.syncfusion.com/feedback/6851/script-error-throws-when-opening-excel-checkbox-filter-using-column-menu-with-date-value-as-ticks  

Query #2 

Also, we have considered  “script error throws when open the menu filter using column menu in mobile devices” as a bug. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link:  

Link: https://www.syncfusion.com/feedback/6852/script-error-throws-when-open-the-menu-filter-using-column-menu-in-mobile-devices 

The fix for the above issues will be including in our upcoming patch release July 03, 2019. Until then we appreciate your patience. The above feedback pages are under reviewing process after which it will be visible to you. 

 

Regards, 

Pavithra S. 

[Gene Black]

Thank you for your prompt attention. I am in the process of evaluating your software and while reviewing the functionality and its support of our current functionality is important, it is also important to determine the turnaround and assistance provided for identified problems.

[Hariharan J V]

Hi Gene, 

 

Thanks for your update. 

 

As we said, we will include the fix in our upcoming patch release July 03, 2019. We will let you know once the patch release is successfully rolled out. 

 

Regards, 

Hariharan 

[CodeStore Technologies]

We can offer the knowledge and skills you need to establish a fruitful project, whether you need a single developer or a team. To learn more about our React development services, get in touch with us right away! Hire software developers