Blazor Kanban Board - Show/Hide Columns
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Concept - 3 items | Recipe Test - 3 items | Photography - 3 items | Approved - 3 items |
|---|
[3]Concept Appetizer
Smoked Brisket FlatbreadNew appetizer concept for the autumn menu. Test with house-smoked brisket. Appetizer
Crispy Cauliflower BitesVegan-friendly small plate. Pairs with the new smoked paprika aioli. Appetizer
Truffle Mushroom CrostiniUpscale appetizer concept featuring wild mushrooms, truffle oil, and whipped ricotta. | [3]Recipe Test Entrée
Pan-Seared HalibutSpring seasonal entrée. Test with citrus-beurre blanc and seasonal vegetables. Salad
Roasted Beet SaladLight entrée salad with whipped goat cheese and candied walnuts. Entrée
Maple Glazed SalmonSeasonal entrée under development with maple glaze and roasted root vegetables. | [3]Photography Dessert
Chocolate Olive Oil CakeDessert concept, photographed for the menu proof. Awaiting final sign-off. Beverage
Lavender LemonadeHouse-made seasonal beverage. Last round of recipe testing. Dessert
Strawberry Cheesecake TartFinal dessert photography scheduled for the upcoming menu redesign. | [3]Approved Entrée
Burrata and Heirloom TomatoSummer seasonal special launched and now retired for the season. Beverage
Spiced Pear CocktailAutumn cocktail retired after a successful eight-week run. Beverage
Honey Ginger MocktailSeasonal mocktail completed its promotion period and archived in recipe records. |
Properties
This sample demonstrates how to change column visibility dynamically in the Blazor Kanban component by visualizing a Menu Development. Use the property panel checkboxes to show or hide specific columns across To Do, In Progress, Testing, and Close stages.
Toggle column visibility using the Visible property on each KanbanColumn.
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 Close.
- Drag and Drop: Move cards between the visible columns to update their workflow status.
Key interactive features demonstrated in this sample include:
- Show or Hide: Use the property panel checkboxes to toggle the visibility of each column.
- Live Layout: The board re-renders as columns are shown or hidden, keeping the visible columns properly sized.
- Card Persistence: Cards in hidden columns remain in the data source and reappear when the column is shown again.
- Multi-Column Toggle: Multiple columns can be shown or hidden at the same time using the property panel.
The Property Panel offers quick toggles for managing the visible columns:
- Column Checkbox: Each column has a dedicated checkbox to show or hide it on the board.
- Layout Adjust: The board automatically adjusts the layout as columns are shown or hidden.
- Persistence: The visibility state is preserved in the component data, so the chosen layout is retained.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.