JmGridLayout

JmGridLayout is a blazor component for creating CSS grid layouts with drag and drop support. Each grid cell is a drop zone where you can drag and drop grid items.

Properties

Property	Type	Description
Items	IEnumerable<T>	Specifies the collection of items that will be displayed.
ItemDropped	EventCallback<DropEventArgs<T>>	Fires when an item is dropped inside a grid cell.
Columns	RenderFragment	Allows you to specify grid columns.
Rows	RenderFragment	Allows you to specify grid rows.
ItemTemplate	RenderFragment<T>	Specifies the template used to display the items.
IndexField	Func<T, int>	Specifies the property that defines the item's index.
CanDrop	Func<T, int, bool>	Specifies if the item should be allowed to drop to the specific index.
ColumnGap	string	Specifies the gap between the columns.
RowGap	string	Specifies the gap between the rows.
Class	string	Specifies the classes to be applied to the grid container.
Draggable	bool	Specifies if the items should be draggable. When set to false, drag and drop is disabled.
Handle	string	Specify a css selector for a handle element if you don't want to allow drag action on the entire element.
EmptyTemplate	RenderFragment	Specifies the template to be displayed in empty cells.

Example:

<JmGridLayout T="Customer"
              Items="_customers"
              ItemDropped="OnItemDropped"
              IndexField="@((customer) => customer.Index)"
              CanDrop="CanDrop"
              Class="flex-grow-1"
              ColumnGap="0.25rem"
              RowGap="0.25rem"
              Draggable="true"
              Handle=".card-header">

    <Columns>
        <JmGridLayoutColumn Width="minmax(0, 1fr)" />
        <JmGridLayoutColumn Width="minmax(0, 1fr)" />
        <JmGridLayoutColumn Width="minmax(0, 1fr)" />
        <JmGridLayoutColumn Width="minmax(0, 1fr)" />
    </Columns>

    <Rows>
        <JmGridLayoutRow Height="minmax(0, 1fr)" />
        <JmGridLayoutRow Height="minmax(0, 1fr)" />
        <JmGridLayoutRow Height="minmax(0, 1fr)" />
        <JmGridLayoutRow Height="minmax(0, 1fr)" />
    </Rows>

    <ItemTemplate>
        <div class="card" style="height: 100%;">
            <div class="card-header bg-primary text-white">
                @context.Index
            </div>
            <div class="card-body">
                <p>@context.Name</p>

                @if (context.Id == 4)
                {
                    <p><b>Is not allowed to drop.</b></p>
                }
            </div>
        </div>
    </ItemTemplate>
</JmGridLayout>

@code {
    private List<Customer> _customers;

    protected override void OnInitialized()
    {
        _customers = new List<Customer>()
        {
            new Customer { Id = 1, Name = "Jim", Index = 0 },
            new Customer { Id = 2, Name = "George", Index = 2 },
            new Customer { Id = 3, Name = "John", Index = 5 },
            new Customer { Id = 4, Name = "Lisa", Index = 9 },
        };
    }

    private void OnItemDropped(DropEventArgs<Customer> args)
    {
        var droppedCustomer = args.Item;
        var droppedIndex = args.Index;

        var existingCustomer = _customers.FirstOrDefault(c => c.Index == droppedIndex);

        if (existingCustomer != null)
        {
            existingCustomer.Index = droppedCustomer.Index;
        }

        droppedCustomer.Index = droppedIndex;
    }

    private bool CanDrop(Customer customer, int index)
    {
        if (customer.Id == 4 || index % 4 == 3)
        {
            return false;
        }

        return true;
    }

    public class Customer
    {
        public int Index { get; set; }
        public long Id { get; set; }
        public string Name { get; set; }
    }
}

CSS classes

The component uses the following CSS classes that you can use to customize it's style:

Class	Description
jm-container	This class can be used to style the grid container element.
jm-dropzone	This class can be used to style the drop zones.
jm-can-drop	This class is added to the drop zone when and an item is dragged on top of it and it is allowed to drop.
jm-no-drop	This class is added to the drop zone when and an item is dragged on top of it and it is not allowed to drop.
jm-draggable	This class can be used to style the wrapper div element of each grid item. This wrapper is needed to make the items draggable.

Example:

.jm-dropzone {
    border: 1px dashed var(--bs-secondary);
    border-radius: 0.2rem;
}

.jm-draggable {
    height: 100%;
}

.jm-can-drop {
    border: 2px dashed var(--bs-success);
    border-radius: 0.2rem;
}

.jm-no-drop {
    border: 2px dashed var(--bs-danger);
    border-radius: 0.2rem;
    background-color: rgba(var(--bs-danger-rgb), .25);
}