Blazor Kanban Board - Workflow Management
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Order - 4 items | Ready to Serve - 4 items | Home Delivery - 4 items | Delivered - 5 items |
|---|
[4]Order Mexican Green Wave Stromboli sandwich with chili sauce
 Fresh Veggie Veggie with Onions and Capsicum
Chicken Golden Delight Barbeque chicken with a topping of golden corn loaded with extra cheese
 Cheese and Corn Cheese with golden corn
 | [4]Ready to Serve Peppy Paneer It's made using toppings of tomato, mozzarella cheese and fresh basil
 Pepper Barbecue Chicken Pepper Barbecue Chicken with cheese
 Chicken Sausage Chicken Sausage with cheese
 Chicken Tikka Tandoori masala with Chicken Tikka, Onion, red paprika and mint
 | [4]Home Delivery Margherita Lebanese Pizza topped with tomato sauce
 Pepper Barbecue and Onion Pepper Barbecue chicken with Onion
 Veggie Paradise Veggie Delight with Golden Corn, Black Olives, Capsicum and red Paprika
 Chicken Dominator Double Pepper Barbecue Chicken with Peri-Peri Chicken, Chicken Tikka, Grilled and Rashers
 | [5]Delivered Indian Tandoori Paneer Tandoori Paneer with capsicum, red paprika and mint
 Chicken Fiesta Grilled Chicken Rashers with Peri-Peri chicken, Onion and Capsicum
 Double Cheese Margherita Margherita with chili sauce and double Cheese
 Deluxe Veggie Onions and Capsicum those delectable mushrooms with paneer and golden corn to top it all
 Veg Extravaganza Pizza with corn, olives, onions, capsicum, tomatoes and jalapeno with cheese to go all around
 |
This example demonstrates workflow constraints that restrict card transitions between columns in the Blazor Kanban component by visualizing a pizza kitchen order tracker. Drag and drop cards to see allowed and restricted movements between the Order, Ready to Serve, Home Delivery, and Delivered columns.
In this sample, cards can be dragged from Order to Ready to Serve and Home Delivery. Cards in Delivered cannot be moved back to Order. These actions are configured using the following KanbanColumn properties:
- TransitionColumns – Allows transitions only to specified columns.
- AllowDrag – Enables/disables dragging from the column.
- AllowDrop – Enables/disables dropping into the column.
Additional essential interactions that enhance analysis and control are also featured:
- Workflow: Restrict card transitions between columns to enforce the intended business process.
- Card Template: Render a custom card layout with image, title, description, and tags.
- Tooltip: Show extra card details on hover to surface order information on demand.
Key interactive features demonstrated in this sample include:
- Order to Ready: Drag a card from Order to either Ready to Serve or Home Delivery to start preparation or dispatch.
- Ready to Served: Drag a card from Ready to Serve to Delivered to mark the in-house order as served.
- Home Delivery: Drag a card from Home Delivery to Delivered to mark the delivery as complete.
- Restricted Backflow: Cards in Delivered cannot be dragged back to Order, enforcing the workflow direction.
The Workflow Configuration highlights the building blocks of column transitions:
- TransitionColumns: Whitelist the target columns a card is allowed to move into from a given column.
- AllowDrop: Control whether new cards can be dropped into a specific column.
- AllowDrag: Control whether cards in a specific column can be picked up for drag operations.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.