React-grid-layout: Prevent to move grid items during dragging.

[Jero786]

Hello! @STRML First of all, Thanks for this amazing component!!

So, I have a very large of items in my grid. I need to drag all the time the grid item around the grid, but during the dragging process, the rest of the grid item are moving too (because I put the property static:false in order to allow me to drag them).

So, thinking in a possible solution, I did on onDragStart turn all the item static:true until to finish dragging (onDragStop), that I turn static:false all the grid items again.

This process is very expensive, so, I thinking to only re-rendering the grid items that are currently in the current view-port (only the visible part of the current screen), but I couldn't do that.

So how could be the best way to freeze items during the dragging process without need to re-rendering all the react grid items?

Thanks very much!

[STRML]

Hey @Jero786 - have you solved this issue? Please reopen if you have. In general, you may get some mileage by requiring GridItem (require('react-grid-layout/build/Griditem')) and monkey-patching shouldComponentUpdate.

[Jero786]

@STRML
I could not resolve this issue yet, in fact, I have a worst problem that is because my grid is so large (in my production environment), the rendering process of each time when re-render all grid items take me seconds! so for summarise I have two big problem:

1) The grid item I spend almost 30 second to render all the boxes in the grid, so the browser like chrome, throw message like, kill process or continue so, I am tring to create several grid items, in order to isolate the rendering of each part of the grid that share the same layout, and I'm trying to use github.com/loktar00/react-lazy-load. I could finish yet to implement the change.

2) The second problem is, because is so large, each time I drag the order expend almost 5 seconds to render again the grid. but would be very usefully to have the control to use shouldComponenteUpdate in each of boxes in order to only re-rendering the boxes that need to render.

So could you have same example of implementation of GridItem?? using shouldComponenteUpdate
Thank you very much!!

[menelike]

I experience similar results. I think this might also be related to https://github.com/STRML/react-grid-layout/issues/156. With immutable objects shouldComponentUpdate is really simple since we just need a === compare.

[Jero786]

@STRML @menelike

you may get some mileage by requiring GridItem (require('react-grid-layout/build/Griditem')) and monkey-patching shouldComponentUpdate.

How could be the example to do that?
Thanks!

[menelike]

@Jero786

I made an experiment on stateless components with some destructive API changes which targets performance issues. You could try that just to know if your performance issues could be increased this way. Keep in mind that this is just an experiment.

You can take a look here: https://github.com/menelike/react-grid-layout/tree/performance

More information here: https://github.com/STRML/react-grid-layout/issues/156#issuecomment-183895873

You should actually follow just one rule: If you mutate the layout or the griditems within the layout, make sure the layout which is passed to RGL does not equal the last layout e.g. oldLayout === newLayout => false. This is needed because shouldComponentUpdate only checks for object equality to determine if an update is needed. This can be accomplished by layout.splice() for example.

[nikolas]

@Jero786 I've added an option I've called preventCollision here: https://github.com/STRML/react-grid-layout/pull/385
This prevents the grid item positions from changing when collided with by the dragged item.

[mleblanc2]

Has anything been done with #385?
Is there a plan to add it to the master branch?
I cannot get the onDragStart and onDragStop behavior to happen as described above.

I need to be able to move cells and not have other cells move while moving one cell.

[Jero786]

@mleblanc2 @menelike @STRML
Finally the solution is here https://github.com/STRML/react-grid-layout/pull/385