Our blazing fast Grid component built with pure JavaScript


Post by guillermoxintel »

Hello, sorry to bother you with another question but I been dealing with a little problem using row re-ordering in a tree we are building.

Basically, we have a tree of 3 levels, Locations, locations contains Groups and groups contains Positions, all this works as expected but here at Intel decided they would like to be able to ONLY move groups between locations.

In the following screenshot, we are trying to move the group called "Central Factory" inside "Australia NET" location to "Japan GS2".
Image
As you can see, we have the blue line indicating that I want the group below Japan GS2, but when releasing the mouse, what we get is an error as follow:
Image
And the page simply stops working... (this error is fired by one of your scripts somehow) now if we are more carefully the mouse to the end of the Japan GS2 line, then we will see the letters become blue and a little arrow appears on top/left of the line, (as shown in the following screenshot), and if released when that happens it does what it was supposed to do...
Image
The problem we have, is that in most cases, people will release when they see the blue line and that's it, they will not wait for the little arrow to appear or the letters to become blue, they will just forget.

I have removed any restrictions (events) and just enabled the following on my grid:

                rowReorder: {
                    showGrip: true,
                    listeners: {

                    gridRowBeforeDragStart: (event) => {

                        //console.log(event);

                        //var record = event.context.record;

                        //if (record.id.startsWith('Group')) return true;

                        //return false;

                    },

                    gridRowBeforeDropFinalize: async (event) => {

                        //console.clear();
                        //console.log(event);

                        //var record = event.context.record;
                        //var parent = event.context.parent;

                        //if (parent.id.startsWith('Location')) {

                        //    if (parent.locationId != record.locationId) {

                        //            const result = await bryntum.grid.MessageDialog.confirm({
                        //                title: 'Please confirm',
                        //                message: 'Did you want the row here?'
                        //            });

                        //        return true;

                        //    }

                        //}                            

                        ////// true to accept the drop or false to reject

                        ////return result === bryntum.grid.MessageDialog.yesButton;

                        //return false;

                    }
                },
            }

Thank you in advance for any help and or orientation you may bring, we are using v4 of the grid, not sure if this could have something to do.


Post by mats »

Thank you in advance for any help and or orientation you may bring, we are using v4 of the grid, not sure if this could have something to do.

Hard to say, can you please modify one of our default samples so that you reproduce the error and then ZIP it up and upload it here? Then we can take it from the and try to fix it quickly.


Post by guillermoxintel »

My boss told me to de-assembly most of what I have done, leaving just the basic parts, because she said she saw this working before and think something we did is making this behave differently, I will try to reduce it as much as possible, if we can't find what's going on, we will then ship this sample to you, thank you Mr. Mats, as usual very helpful.


Post by guillermoxintel »

Ok... we reduced the grid as much as possible (removed events, buttons, renderers, etc etc), did update to v5, and the result is just the same, please download the sample application and run it (it should be very easy to do, just extract the HTML file and the js file containing the grid code and run).

I did upload the file using my google drive.

https://drive.google.com/file/d/1o7RwPbr402qd73oJWwWqlp1ITTt180C3/view?usp=sharing

Please let me know if you need anything, I can video chat, share screens, etc... thank you for any help you may bring.


Post by mats »

I can move the group you mentioned just fine. Can you please share a small video showing the exact actions you perform to make the test case crash?

Btw I moved the CSS include to the HTML page to make test case simpler.

	<link rel="stylesheet" href="../../build/grid.stockholm.css" data-bryntum-theme>

Post by guillermoxintel »

I'm surprised that you say all works as expected there, I did try on Chrome and Edge, ... I can try to make a video, not sure how to... is not better to share my screen with you? all is explained in the first post but I will try to do that anyway. I'll send you a msg when that is done... thank you.


Post by mats »

Ok video will be great. Are you on Windows or Mac?


Post by guillermoxintel »

Ok Mr. Mats, here's the URL of the video you requested:

https://drive.google.com/file/d/1v6Xzfac5SvRMhpiDFiKKHNto8njYHKW1/view?usp=sharing

The concept is the same as in the beginning, a tree with 3 levels, Locations > Groups > Positions. The idea is to be able to move Location1 > Group A to Location2 > Group B, as explained in the video. The problem is that if we move the item when the blue line appears, it fails with an error, and if we move slowly to the end of the Location line, after we see the letters turn light blue, then it works, the problem is people will not do that for sure, they will see the line and release...

Beforehand, I apologize for my bad English, I sincerely think it could be better if we could find a way to share screens, that would be fantastic and fast... I had trouble finding a screen recorder that did not contain a virus, etc... We are working on windows pcs.

Thank you and please let me know if you need any help or anything else.


Post by alex.l »

Thank you for the video, it's very clear now and we were able to reproduce the problem. We've opened a ticket here: https://github.com/bryntum/support/issues/4525

Thank you for your report!

All the best,
Alex


Post by alex.l »

Seems like it fixed in current code base. You can try to download latest nightly build or wait for nearest official release.

All the best,
Alex


Post Reply