Blazor Kanban Board - API Reference
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
New Order - 5 items | Prep - 5 items | Oven - 5 items | Out for Delivery - 5 items |
|---|
[5]New Order Order
BA
BKO-101Cafe Aurora needs 40 sourdough loaves for Saturday morning delivery. Order
BA
BKO-102Greenfields School cafeteria requires 25 whole-grain loaves by Thursday. Order
BA
BKO-109Bistro Voltaire ordering 60 French baguettes for weekend service. Order
BA
BKO-110Saturday morning cinnamon roll order for the downtown farmers market. Order
BA
BKO-111New monthly rye bread subscription for 12 local customers. | [5]Prep Order
BA
BKO-103Three-tier vanilla cake with raspberry filling for a 30th birthday. Order
BA
BKO-104Two dozen gluten-free brownies for a neighborhood block party. Order
BA
BKO-112Five-tier wedding cake with sugar flowers for a 200-guest reception. Order
BA
BKO-113Preparing new sourdough starter for the autumn bread lineup. Order
BA
BKO-114Laminating butter for 200 croissants in the morning bake cycle. | [5]Oven Order
BA
BKO-105Mixed pastry box for 25 attendees at a downtown design studio. Order
BA
BKO-106Sampler trays for a Saturday open-house tasting event. Order
BA
BKO-115Testing new olive and rosemary focaccia recipe for the spring menu. Order
BA
BKO-116Quality check on new gluten-free chocolate cake recipe before launch. Order
BA
BKO-117Verifying new eco-friendly packaging meets all health regulations. | [5]Out for Delivery Order
BA
BKO-107Restock 60 butter croissants at the Riverside Market location. Order
BA
BKO-108Vegan cookie platter delivered to a tech office for a launch event. Order
BA
BKO-118Daily bread delivery to three local cafes completed by 7 AM. Order
BA
BKO-119Weekend sourdough baking class completed with 12 happy students. Order
BA
BKO-12050th anniversary cake delivered and set up at the reception venue. |
Properties
This sample demonstrates key APIs to manipulate the Blazor Kanban component at runtime by visualizing a Bakery Orders. Use the property panel to add and remove columns dynamically across To Do, In Progress, Testing, and Close stages.
The demo shows how to add or remove columns programmatically using property binding and dynamic rendering concepts, enabling flexible board configuration without page reloads. The board exposes public methods on the SfKanban instance for runtime manipulation.
Additional essential interactions that enhance analysis and control are also featured:
- Columns: Configure the workflow stages that group cards on the board.
- Validation Dialog: Show a confirmation dialog when a duplicate or invalid column configuration is detected.
- Data Binding: Bind the card data source to the Kanban component for display across columns.
Key interactive features demonstrated in this sample include:
- Add Column: Use the property panel to add a new column by entering header text and selecting a key field.
- Remove Column: Remove an existing column by selecting it from the dropdown and confirming the removal.
- Validation: Duplicate or empty column configurations are blocked through a confirmation dialog.
- Dynamic Render: The board re-renders the updated column list as soon as a column is added or removed.
The Property Panel offers extensive customization options for runtime board manipulation:
- Add Column: Enter header text and pick a key field to add a new column to the board.
- Remove Column: Select an existing column and remove it from the board layout.
- Validation: See inline error messages when the input is invalid or already exists on the board.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.