Ngx-datatable: Column reorder error in IE11, Edge, Firefox

[nickhellmich]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
Columns can be dragged but an error occurs when dropping column in new location.

Expected behavior
Columns reorder without error.

Reproduction of the problem
http://swimlane.github.io/ngx-datatable/#

What is the motivation / use case for changing the behavior?
If this feature isn't supported in IE it cannot be used in our application.

• Browser:
  Firefox 52.0.2 | IE 11, Edge

[amcdnl]

Is this a recent regression?

[amcdnl]

Fixed in 7.3.1

[Skyscreepa]

Hi, still having this bug with the 8.0.0

Same error : "eventTaks 'undefined.addEventListener:mouseup' ....."

But only on ie11 , firefox works fine with me

Fluid row height demo works but "Virtual Scrolling with 10k Rows" still has the bug

[NahlaEssam]

@amcdnl this bug still exist in 8.2.1 in IE 11 and Edge
and in Chrome and firefox if you failed to reorder col and select another one actually you are selecting and recording two cols

[stas-kh]

@amcdnl Hi, do you have any updates on this?
Because in version 10.0.5 it is still impossible to reorder columns in IE11 (but I have no errors in console).
Edge and Firefox work as expected.

Here is my configuration of ngx-datatable:

<ngx-datatable 
                   class="material fullscreen"
                   [loadingIndicator]="loadingIndicator"
                   [reorderable]="true"
                   [scrollbarV]="true"
                   [scrollbarH]="true"
                   [headerHeight]="50"
                   [rowHeight]="50"
                   [rows]="rows"
                   [columns]="columns"
                   [columnMode]="'force'"
                   [footerHeight]="50">
</ngx-datatable>

When I launched "10k rows" demo in IE11 it works more or less OK.

[rlbonn01]

@stas-kh Having same issue now in new application that we need to support IE11 in. Please reply back if you find a work-around.

[stas-kh]

@rlbonn01 Hi, I forked the library and added needed changes for IE.

Try it from here:
https://www.npmjs.com/package/ngx-datatable-with-ie-fix

[krzysiekpiasecki]

@stas-kh Fork fix doesn't resolve reordering problem for IE 11 (Win 7). Even more the whole reordering and sorting funcionality is off. No errors in console.

[stas-kh]

@krzysiekpiasecki We've been using this fork for more than half of a year, no problems were found.

[krzysiekpiasecki]

@stas-kh May I ask you if you check this online https://stackblitz.com/github/krzysiekpiasecki/ngx-datatable-with-ie-fix ?

[stas-kh]

@krzysiekpiasecki I looked at your code, the problem is just in one CSS rule for selector provided by the library:

@media all and (-ms-high-contrast:none) .datatable-header-cell > div {}

If you reassign pointer-events: none for the specified selector to pointer-events: auto, everything will work properly. You can reassign this rule in your own styles.

[krzysiekpiasecki]

@stas-kh __Thanks for your support__. Following your advice this code was commit in app.css:

@media all and (-ms-high-contrast:none) {
    .datatable-header-cell > div {
        pointer-events: auto;
    }
}

Still doesn't work :/ You can watch online demo here: https://stackblitz.com/github/krzysiekpiasecki/ngx-datatable-with-ie-fix?

Source repository: https://github.com/krzysiekpiasecki/ngx-datatable-with-ie-fix

[stas-kh]

@krzysiekpiasecki Try it out: https://stackblitz.com/edit/github-cvygc2

I've added the following to styles.css:

@media all and (-ms-high-contrast:none) {
    .datatable-header-cell > div {
        pointer-events: auto !important;
        -ms-user-select: none;
        cursor: pointer;
    }
}

But it is better to add rules like user-select and cursor pointer not only for IE :)

[krzysiekpiasecki]

@stas-kh

Magic.

I've updated a source github repository and it's still doesn't work https://github.com/krzysiekpiasecki/ngx-datatable-with-ie-fix.

On the other side at your stackblizt reorder works even with a simplest resolution.

It works! My Appreciation @stas-kh.

[Hellmy]

Could this be related to the commit https://github.com/swimlane/ngx-datatable/commit/1883b3ac1284307bb3dafa4cb299aad6a90b3c10?
There the polyfill was introduced and the eventX and eventY isused. I'm just confused why event.x and event.y are still used because they are relative to parent element and would give wrong coordinates in IE11... Perhaps the cooredinates are correct in FF?

I'm also questioning myselft why document.msElementsFromPoint(x, y); is not used for the IE in the polyfill - is much more reliable in my local tests because with current polyfill only left to right drag and drop ist possible with document.msElementsFromPoint(x, y); also right to left becomes available

[HackPoint]

@Hellmy Did you solved angular5 with 11.3.2 ngx-datatable - drag&drop issue?

[Hellmy]

I still assume my hint to the commit is the source for the issue and perhaps you could solve it in a fork... But the maintainer wasn't responding to my questions above.

So yes I would assume it would be also fixable for angular 5 and the current release if the code would be adapted.

[strvmarv]

Is this still an issue today in 2020? We're experiencing similar behavior in IE. I'm assuming from no conversation since 2018, that either the previous maintainer no longer supports or the issue is no longer exists.