Blazor Kanban Board - Local Data Binding
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Plan - 3 items | Demo - 3 items | Framing - 3 items | Finishing - 3 items |
|---|
[3]Plan Design
Kitchen Design SelectionFinalize cabinet finish, countertop material, and hardware with the homeowner. Permits
Permit ApplicationSubmit building permit application for the bathroom addition. Design
Exterior Paint Color ApprovalReview and approve final exterior color palette and trim selections. | [3]Demo Demolition
Living Room Drywall RemovalRemove the existing drywall in the living room and dispose of debris. Demolition
Bathroom Tile RemovalStrip existing tile from the bathroom floor and shower walls. Demolition
Kitchen Cabinet DemolitionRemove existing cabinets and countertops in preparation for remodel work. | [3]Framing Framing
Bedroom FramingFrame the new closet wall in the primary bedroom. Inspection
Electrical Rough-In InspectionSchedule rough-in inspection before drywall is closed up. Framing
Garage Partition FramingConstruct framed partition wall to create a dedicated workshop space. | [3]Finishing Finishing
Hardwood Floor InstallEngineered oak floors installed in the living and dining rooms. Finishing
Backsplash Tile InstallSubway tile backsplash installed and grouted in the kitchen. Finishing
Interior Paint Touch-UpsComplete final paint touch-ups and trim detailing before project handoff. |
This sample demonstrates binding an array of objects (local data source) to the Blazor Kanban component by visualizing a Local Renovation Tasks. The board renders a predefined list of bug reports and feature requests grouped by workflow status.
Bind data to the board using the DataSource property, which accepts an array of objects or a DataManager instance. In this demo, an array of objects is assigned to render columns and cards.
Additional essential interactions that enhance analysis and control are also featured:
- Columns: Group cards by workflow stage such as To Do, In Progress, Testing, and Done.
- Card Settings: Map the title and summary fields to display rich card content sourced from local data.
- Drag and Drop: Move cards between columns to update their workflow status with a single action.
Key interactive features demonstrated in this sample include:
- Local Data Binding: An in-memory array of task objects is supplied to the
DataSourceproperty, eliminating the need for a remote endpoint. - Column Mapping: The
KeyFieldon each column maps to theStatusfield of the data to position cards correctly. - Card Display: Each card shows the task ID and summary text, which is rendered from the bound local data.
- Auto Layout: Columns are automatically sized to fit the available board width without any manual configuration.
The Data Source panel highlights the supported ways to populate the board:
- Array of Objects: A simple, strongly typed
KanbanDataModellist is used as the data source in this demo. - KeyField Mapping: The
KeyFieldproperty of the Kanban and each column maps the data field that drives column placement.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.