MBDragAndDropList<TItem>

Summary

A list of user provided render fragments that can be re-ordered with drag and drop.

Details

• Represents a list type TItem as a vertical series of cards with a RenderFragment for each item that can be dragged and dropped to re-order the list.
• Items can only be dropped within their own containing list, and other MBDragAndDropList components on the same page will not accept the item being dragged.
• Items also cannot be moved to the same position.

Assisting Blazor Rendering with @key

• MBDragAndDropList renders similar table rows with a foreach loop;
• In general each item rendered in a loop in Blazor should be supplied with a unique object via the @key attribute - see Blazor University;
• MBDragAndDropList by default uses each item in the Items parameter as the key, however you can override this. Material.Blazor does this because we have had instances where Blazor crashes with the default key giving an exception message such as "The given key 'MyObject' was not present";
• You can provide a function delegate to the GetKeysFunc parameter - we have used two variants of this:
  • First to get a unique Id property that happens to be in our item's class: GetKeysFunc="@((item) => item.Id)"; and
  • Second using a "fake key" where we create a GUID to act as the key: GetKeysFunc="@((item) => Guid.NewGuid())".
  • You can see an example of this in the MBList demonstration website page's code.