Access new MDBSortable state, after sort


Topic: Access new MDBSortable state, after sort

mgtripoli pro premium asked 6 months ago

The API documentation for the MDBSortable plugin did not seem to provide any details for this, so I will be asking here.

When using the MDBSortable plugin, we pass in a list of components, and everything renders as well, perfectly fine. My question is, how to we access the new state of the updated list?

Example (using an object for a more simple representation):

Say I have an array of objects:

footballStandings = [ { teamName: "Giants", rank: 1 }, { teamName: "Eagles", rank: 2 } ]

Theoretically, using the sortable widget, I would pass this list to it. Then I move the node "Giants" into the current position of "Eagles", I would expect some sort of callback which would then give me the new state of the list. Something such as:

const getUpdatedList = values => { console.log(values); }

I would expect the "values" param to be an array with the updated position, which look something like this:

[ { teamName: "Eagles", rank: 2 }, { teamname: "Giants", rank: 1 } ]

Is there any way of accessing this new state (of the array) with the plugin? If not, I think it would be advised.


Jakub Chmura staff premium commented 6 months ago

HI @mgtripoli,

I will add a task to investigate this matter. When I find a solution, I will let you know.

Best, Kuba


Jakub Chmura staff premium answered 6 months ago

Did you try to use an onSortEnd prop like below?

<Sortable 
    onSortEnd={(a, b) => this.onSortEndHandler(a, b)}
 />

The first two arguments will return the old and new index of the moving element.

You will be able to manage your array with this values. For now, we can't add your feature because we have to done a big task with a very high priority, after that we will be able to think about new features like yours.

Best, Kuba


When using onSortEnd method, the elements are not droppable.After Dragging the elements to new position they will bounce back to the previous position. All other methods work fine with drag and drop. I am a premium user but logged in with Facebook.


Piotr Glejzer staff commented 5 months ago

I added the task to check it


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: React
  • MDB Version: 4.25.0
  • Device: Mac Book pro 2017
  • Browser: Chrome, Firefox
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No