Readme

BlazorBasics.DraggableGrid

A lightweight, customizable, and fully-featured draggable grid component for Blazor applications. Perfect for building dashboards, admin panels, and any interface that requires rearrangeable layouts.

Features

Drag & Drop - Intuitive drag and drop with visual feedback
Collision Detection - Prevents overlapping items automatically
Fully Customizable - CSS variables and theme support
Keyboard Controls - Navigate and manipulate with keyboard
Generic Data Support - Works with any data type via TData
Multiple Themes - Built-in dark and pastel themes
Selection Management - Built-in item selection system
Resizable Items - Programmatically resize items
Accessible - Focus management and keyboard navigation

Installation

Install-Package BlazorBasics.DraggableGrid dotnet add package BlazorBasics.DraggableGrid

Quick Start

In your _Imports.razor:

@using BlazorBasics.DraggableGrid
@using BlazorBasics.DraggableGrid.Models
@using BlazorBasics.DraggableGrid.ValueObjects

Create a sample page

@page "/dashboard"
@using BlazorBasics.DraggableGrid
@using BlazorBasics.DraggableGrid.Models
@using BlazorBasics.DraggableGrid.ValueObjects

<PageTitle>Dashboard</PageTitle>

<h1>My Dashboard</h1>

<GridVisualization TData="WidgetData"
                   Layout="@_layout"
                   SelectedItem="@_selectedItem"
                   SelectedItemChanged="OnSelectedItemChanged"
                   LayoutChanged="OnLayoutChanged"
                   OnItemRemoved="OnItemRemoved"
                   Theme="@GridTheme.DarkTheme">
    
    <ChildContent Context="widget">
        <div class="widget-content">
            <h3>@widget.Title</h3>
            <p>@widget.Description</p>
            <small>Size: @widget.Size</small>
        </div>
    </ChildContent>
    
</GridVisualization>

@code {
    private GridLayout _layout = new()
    {
        Columns = 8,
        Rows = 10,
        Gap = "24px",
        ColumnSize = "minmax(50px, 1fr)",
        RowSize = "auto"
        Items = new List<GridItem>
        {
            new(new Grid Position(0,0), new Grid Size(2,2)) {
            Data = "Main Title" // This is an object type to store any type of data.
            },
            new(new Grid Position(0,2), new Grid Size(2,2)) {
            Data = "Subtitle or brief description"
            },
            new(new Grid Position(2,0), new Grid Size(2,2)) {
            Data = "Main content that can be longer and occupy multiple cells. Ideal for displaying detailed information."
            },
            new(new Grid Position(2,2), new Grid Size(2,2)) {
            Data = "Side panel or sidebar with additional information"
            },
        }
    };
    
    private GridItem? _selectedItem;
    
    private void OnSelectedItemChanged(GridItem? item)
    {
        _selectedItem = item;
        Console.WriteLine($"Selected item: {item?.Id}");
    }
    
    private void OnLayoutChanged(GridLayout layout)
    {
        _layout = layout;
        Console.WriteLine("Layout changed!");
        // Here you would typically save the layout to your database
    }
    
    private void OnItemRemoved(GridItem item)
    {
        _layout.Items.Remove(item);
        Console.WriteLine($"Removed item: {item.Id}");
    }
    
    public class WidgetData
    {
        public string Title { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
        public string Size { get; set; } = "Medium";
    }
}

Parameter	Type	Description	Default
`Layout`	`GridLayout`	Grid configuration and items	`new GridLayout()`
`ChildContent`	`RenderFragment<TData>`	Template for rendering item content	`null`
`SelectedItem`	`GridItem?`	Currently selected item	`null`
`SelectedItemChanged`	`EventCallback<GridItem?>`	Fires when selection changes	-
`LayoutChanged`	`EventCallback<GridLayout>`	Fires when layout changes	-
`OnItemRemoved`	`EventCallback<GridItem>`	Fires when an item is removed	-
`AllowDragAndDrop`	`bool`	Enable drag and drop	`true`
`AllowKeyboardControls`	`bool`	Enable keyboard navigation	`false`
`Theme`	`GridTheme`	Color theme configuration	`GridTheme.Default`

Property	Type	Description	Default
`Columns`	`int`	Number of grid columns	`10`
`Rows`	`int`	Number of grid rows	`10`
`ColumnSize`	`string`	Width of each cell in pixels	`minmax(50px, 1fr)`
`RowSize`	`string`	Height of each cell in pixels	`minmax(150px, auto)`
`Gap`	`string`	Gap between cells in pixels	`0`
`Overflow`	`string`	Overflow CSS value	`auto`
`Items`	`List<GridItem>`	Collection of grid items	`new()`

Property	Type	Description
`Id`	`srting`	Unique identifier
`Position`	`GridPosition`	Starting column 0 row 0
`Size`	`GridSize`	Starting 1x1

Property	Type	Description
`Column`	`int`	Starting column (0-based)
`Row`	`int`	Starting row (0-based)

Property	Type	Description
`Width`	`int`	Number of columns
`Height`	`int`	Number of rows

DrUalcman/BlazorBasics.DraggableGridv1.1.3

Get Started

Readme

BlazorBasics.DraggableGrid

Features

Installation

Quick Start

Create a sample page

Customization

Using Built-in Themes

Creating Custom Themes

Custom CSS Variables

Keyboard Controls

API Reference

GridVisualization Component

GridLayout Model

GridItem Model inherits GridObject

Methods

GridObject Model

Methods

GridPosition ValueObject

GridSize ValueObject

Public Methods

Advanced Usage

Dynamic Item Creation

Handling Events

Examples

Dashboard with Multiple Widget Types

Admin Panel with Toolbar

Contributing

License

Acknowledgments

Made with love by DrUalcman