Unable to reorder columns

swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular

http://swimlane.github.io/ngx-datatable/

MIT License

4.63k stars 1.68k forks source link

Unable to reorder columns #1464

Open sunilbamal opened 6 years ago

sunilbamal commented 6 years ago

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

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

Current behavior not reordering columns

Expected behavior When reorder is activated, it should be possible to reorder all columns.

Reproduction of the problem https://stackoverflow.com/questions/50982494/how-to-reorder-ngx-datatables-column-in-angular

What is the motivation / use case for changing the behavior? Better options for customization

Please tell us about your environment:

Table version: 0.8.x 12.0.0
Angular version: 2.0.x 6
Browser: Chrome 67.0.3396.87
Language: [all | TypeScript X.X | ES6/7 | ES5]

Rene8484 commented 6 years ago

Having the same problem, just that it does not work for me in IE (11), works with FF/Chrome/Edge though. Strange enough the example works in IE, while it doesn't here.

Apparently OrderableDirective.isTarget called in OrderableDirective.onDragEnd does not return a target and won't emit reorder.

HackPoint commented 6 years ago

@Afflicted187 have you solved it in IE? the Angular5 example?

Rene8484 commented 6 years ago

Actually it was Angular6, the description was just wrong.. Anyway, unfortunately I did not solve it. We have someone else look at it, maybe a set of fresh eyes sees what is missing..

HackPoint commented 6 years ago

@Afflicted187 I will try to solve it later on my project, will update if any success.

KoenMeijer commented 6 years ago

I'm working with version 11.3.2 in combination with IE11 and the reordering isn't working. Tried the following possible fixes from other posts:

.datatable-header-cell { z-index: 0; }

and

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

But that did not fix the issue.

srgreen00 commented 6 years ago

Has anyone had any luck with this?

I'm in IE 11 with NGX DataTable 13.1 - Angular 5. And, I'm using the .datatable-header-cell z-index: 0; style suggestion.

Chrome with the same configuration is fine.

As other have done, I've identified that on drop, OrderableDirective goes into onDragEnd, and then there's no target, and thus no reorder emitted.

Like what's described here, but unlike https://github.com/swimlane/ngx-datatable/issues/922 - the drag icon is displayed when the mouse is in the head cell and onMousedown's isDragElm is true.

Samuel-Ayvazyan commented 5 years ago

Hi, In the above Pull request, I found and corrected the problem with reordering of columns on Internet Explorer.

Short description of the problem:

document.elementsFromPoint is not existing on IE, it is msElementsFromPoint on it.
In addition to this msElementsFromPoint is not working as expected so didn't get all elements by coordinates and on 'drop' event can't compare with columns to identify with which column to switch.
So the author of ngx-datatable implemented 'elementsFromPoint in utils/elm-from-point.ts, but implementation was not working as expected and also was adding/removing pointer-events to elements on every call to try to find all elements by specified coordinates which make this function very low performance-time-effective.
The new implementation uses getBoundingClientRect and not changing any style in DOM and didn't effect on performance so much as before.

I hope this helps you guys.

HearnMichael commented 5 years ago

Any update on this issue?

Velmurugan47 commented 5 years ago

i am unable to reorder the columns or column dragging in my project.i am only facing only in ie11. if you had any solution. please help me