[data grid] How to move checked row from one grid to another grid in MUI Datagrid premium? about mui-x HOT 5 CLOSED

Hi @yashwant-raut
Interesting use case!
Overall, your approach makes sense to me!
A few comments from me:

1. Using React context works just fine here. A bit simpler solution would be to use a pubsub pattern for communication between the grids.
   For example, using mitt():

   const emitter = mitt();
   
   // Send the selected rows in grid 1
   emitter.emit('moveRows', { rows });
   
   // Receive the selected rows in grid 2
   React.useEffect(() => {
       const onMoveRows = ({ rows }) =>  {
   	  // ...
   	};
   	emitter.on('moveRows', onMoveRows);
   	return () => emitter.off('moveRows', onMoveRows);
   })

2. You have to make sure you don't have duplicated row ids, which is currently the case in the linked demo:
   

from mui-x.

@cherniavskii Thanks for going thorugh codesandbox and my question.
I have never heard about pubsub pattern for communication between the grids. Thanks for giving me context.
I will go through this and try to implement pubsub pattern. It would be great if you could point me to a link to a hosted example where this pattern is used in MUI datagrid.

"You have to make sure you don't have duplicated row ids, which is currently the case in the linked demo:
"
yes for that part I am thinking about creating a dynamic GUID and assign to the rows.

MUI has this method updateRows
"Is it more appropriate to use this method instead of what I have already done?" does this have more performance benefits?
I am going to handle a large dataset in Grid.

Again thanks for the help.

from mui-x.

@cherniavskii Thanks for going thorugh codesandbox and my question. I have never heard about pubsub pattern for communication between the grids. Thanks for giving me context. I will go through this and try to implement pubsub pattern. It would be great if you could point me to a link to a hosted example where this pattern is used in MUI datagrid.

The pubsub pattern is nothing we came up with, but a software design pattern that can be used in a multitude of ways. Here is a basic overview of the pattern explained: Pub/Sub Pattern. In your case both grids could be publishing and subscribing to the events to allow for a bidirectional interaction

"You have to make sure you don't have duplicated row ids, which is currently the case in the linked demo: " yes for that part I am thinking about creating a dynamic GUID and assign to the rows.

👍

MUI has this method updateRows "Is it more appropriate to use this method instead of what I have already done?" does this have more performance benefits? I am going to handle a large dataset in Grid.

Since updateRows can be used to update a subset of rows it certainly has perf benefits.

from mui-x.

@michelengelen thanks for the reply will try to implement this way.

from mui-x.

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @yashwant-raut?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

from mui-x.