Blazor Kanban Board - Workflow Management
This example demonstrates the workflow functionalities that define the flow of transition between the columns. You can drag and drop the cards between Kanban columns to see the workflow restriction.
Order - 4 items | Ready to Serve - 4 items | Home Delivery - 4 items | Delivered - 5 items |
|---|
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
 | 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
 | 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
 | 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
 |
In this sample, you can drag the cards from the Order column and drop them into Ready to Serve and Home Delivery columns.
Also, you couldn’t drag the cards from the Delivered column and drop the cards in the Order column.
The action is controlled using the following properties of KanbanColumn.
- TransitionColumns - Allows the card transition to only these specified columns.
- AllowDrag - Enable/disable the drag action of a column.
- AllowDrop - Enable/disable the drop action on a column.
See also