feat(ngrid): refactor reorder & resize to use new CDK features

Question

feat(ngrid): refactor reorder & resize to use new CDK features

shlomiassaf opened this issue 4 years ago · comments

Currently the library uses the CDK drag & drop to allow resizing and reordering of columns / rows.

The CDK drag & drop has gone through major refactors and breaking changes each time resulting in an small refactor within the library.

Since i've used the CDK D&D from the start i've asked for a lot of changed to it because it is very limited when trying to extend it to something like a big grid with a lot of edge cases.

I've worked around all issues but since the D&D is limited in the public API it exports each workaround has a risk of blowing up in any upcoming D&D version, which happend a-lot.

Now that the CDK D&D matured and some new features added, like row & column resizing and we can think about adding them and doing a complete re-write to the D&D ngrid plugin to support the CDK D&D as is.

Shlomi Assaf · Answer 1 · Wed Jul 15 2020 04:22:52 GMT+0800 (China Standard Time)

Material plugins (mostly Drag & Drop), with legacy support for v7 and v8. Remove that support.
Material plugins inheritance, wasn't doable before should be doable now.
TypeScript language features that weren't possible before, but now with 3.7 are valid.

SEE Note

Sujith Savithry Balan · Answer 2 · Thu Jul 23 2020 20:22:40 GMT+0800 (China Standard Time)

is there a way to drag an item from a table and drop it in another table using ngGrid?

Franco Valerio · Answer 3 · Sat Aug 01 2020 03:58:00 GMT+0800 (China Standard Time)

So, this is related to this error that I'm getting in @pebula/ngrid v2.0.0 and Angular Material v10.1.1 🤔 ?

ERROR in ./node_modules/@pebula/ngrid/fesm2015/pebula-ngrid-drag.js 2134:31-44
"export 'CDK_DROP_LIST' was not found in '@angular/cdk/drag-drop'

Andrew Alderson · Answer 4 · Mon Aug 10 2020 09:04:38 GMT+0800 (China Standard Time)

It looks like in 10.1.0 they move the CDK_DROP_LIST Injection token from the drag.ts file to the drop-list.ts file but didn't update the public-api.ts file to export it. Not sure if this is intentional or an oversight.

Michal Turecki · Answer 5 · Thu Aug 27 2020 18:29:27 GMT+0800 (China Standard Time)

@andrewalderson How did you get around this issue, does ngrid repo contain the patch already?

Andrew Alderson · Answer 6 · Fri Aug 28 2020 00:12:49 GMT+0800 (China Standard Time)

@t00 I am not really sure. I didn't investigate this too deeply or ask the the material team why this was done. This is limited to the drag module so you can either not include it until this issue is fixed or not upgrade angular material past 10.1.0.

Shlomi Assaf · Answer 7 · Fri Sep 25 2020 04:10:19 GMT+0800 (China Standard Time)

I see that in 10.2.2 they re-exported the missing tokens, which seems to be working.
However, they changed the differ for rows in the main table, so it will not work until I upload the new version.
Once uploaded it will support 10.2.2

Shlomi Assaf · Answer 8 · Fri Sep 25 2020 08:34:53 GMT+0800 (China Standard Time)

See @pebula/ngrid@2.1.0 & @pebula/ngrid-material@2.1.0 for the fix.

note that it requires CDK 10.2.2

Shlomi Assaf · Answer 9 · Tue Dec 22 2020 08:11:27 GMT+0800 (China Standard Time)

With ngrid v3, all CDK drag class's are using the proper feature and extend their respective parent classes since this is now available with IVY.

If you're using V3 with viewEngine this might not work as expected... It might work but might also create strange quirks.
I such scenario I suggest moving to IVY or use v2