Blazor Kanban Board - Swimlane Template Customization
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Assigned - 6 items | En Route - 5 items | On Site - 5 items | Closed - 0 items |
|---|
Andrew Fuller - 2 items | |||
[1]Assigned CREW-401 Clear debris and level ground for foundation work at the downtown project site. | [1]En Route CREW-402 Build and brace concrete forms for the foundation pour scheduled for next week. | [0]On Site No cards to display | [0]Closed No cards to display |
Janet Leverling - 2 items | |||
[1]Assigned CREW-403 Lay out and tie reinforcement steel according to structural drawings. 5,000 sq ft area. | [0]En Route No cards to display | [1]On Site CREW-404 Mark existing utilities and install temporary drainage for the new foundation area. | [0]Closed No cards to display |
Margaret Hamilt - 2 items | |||
[2]Assigned CREW-405 Check and log 40 cubic yards of concrete and 2 tons of rebar arriving today. CREW-406 Conduct safety meeting for 15-person crew on concrete pour day procedures. | [0]En Route No cards to display | [0]On Site No cards to display | [0]Closed No cards to display |
Michael Suyama - 2 items | |||
[0]Assigned No cards to display | [1]En Route CREW-408 Level, trowel, and finish concrete surface to spec. Broom finish for safety. | [1]On Site CREW-407 Pour and finish 40,000 lbs of concrete for the building foundation. Estimated 12-hour job. | [0]Closed No cards to display |
Nancy Davloio - 2 items | |||
[1]Assigned CREW-409 Manage water spray and temperature for proper 7-day concrete curing cycle. | [1]En Route CREW-410 Organize and sort 8,000 board feet of lumber for the wall framing team. | [0]On Site No cards to display | [0]Closed No cards to display |
Robert King - 3 items | |||
[0]Assigned No cards to display | [1]En Route CREW-412 Position and bolt trusses onto walls. Crane rental scheduled for day work. | [2]On Site CREW-411 Build wall frames on-site using pre-cut lumber components. 3,000 linear feet. CREW-413 Check concrete after 7-day cure period for cracks or settlement issues. | [0]Closed No cards to display |
Steven Walker - 3 items | |||
[1]Assigned CREW-414 Verify all walls are plumb and square using laser levels and transit tools. | [1]En Route CREW-416 Verify conduit runs and box placement before drywall installation. Code inspection scheduled. | [1]On Site CREW-415 Inspect roof membrane installation and sealant application per spec. | [0]Closed No cards to display |
This sample demonstrates how to customize the swimlane header in the Blazor Kanban component by visualizing a Construction Crews List. In this demo, swimlane headers display assignee photos with names across To Do, In Progress, Review, and Close stages.
Customize the swimlane header using the Template property of KanbanSwimlaneSettings to render rich content.
Additional essential interactions that enhance analysis and control are also featured:
- Swimlane: Group cards horizontally by a field such as assignee to organize work by ownership.
- Swimlane Template: Render a custom layout for each swimlane header including images and text.
- Drag and Drop: Move cards across columns to update their workflow status with a single action.
Key interactive features demonstrated in this sample include:
- Assignee Avatar: Each swimlane header includes the assignee photo rendered from the configured asset path.
- Assignee Name: The assignee name is displayed alongside the avatar for quick identification.
- Swimlane Rows: Cards are grouped by the
AssigneeKeyfield to drive the swimlane layout. - Custom Styling: The swimlane template uses shared CSS so each header looks consistent across the board.
The Swimlane Configuration highlights the building blocks of a custom swimlane header:
- KeyField: Maps the data field that drives swimlane grouping (assignee in this demo).
- TextField: Maps the data field used to display the header text.
- Template: A Razor template that renders the avatar image and the header text inside each swimlane row.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.