Blazor Kanban Board - Toggle Columns
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Proposed - 6 items | Approved - 6 items | In Session - 6 items | Archived - 6 items |
|---|
[6]Proposed Admin
RE
Intro to Python - Room AssignmentAssign lab B302 (30-seat capacity) for Monday 10:00 AM section. Admin
SM
Advanced SQL - Instructor ConfirmationConfirm Dr. Chen availability for Thursday evening 6:30 PM section. Needs laptop projection. Content
FL
Web Development - Curriculum ReviewReview syllabus and prepare learning objectives for the new fall semester offering. Admin
DM
Data Science Capstone - Equipment RequisitionRequest GPU workstations and statistical software licenses for lab component. Technical
IS
Mobile App Dev - Lab SetupInstall iOS/Android SDKs and testing emulators on 25 lab computers. Content
FL
Business Analytics - Textbook SelectionReview three recommended texts and select for upcoming spring semester class. | [6]Approved Admin
RE
Intro Python - Enrollment ManagementMonitor enrollment at 29/30 capacity. Manage waitlist of 5 students for alternate sections. Admin
RE
SQL Advanced - Pre-requisite VerificationVerify all 22 enrolled students met SQL Basics prerequisite requirement. Content
FL
Web Dev - Syllabus FinalizationFinalize course outline, add grading rubric, and post to course management system. Admin
SM
Data Science - Guest Speaker CoordinationConfirm three industry guest lectures scheduled for weeks 5, 9, and 13. Technical
IS
Mobile App - SDK and Tools InstallationInstall and test Xcode 15 and Android Studio on all 25 lab workstations. Admin
DM
Business Analytics - Textbook OrdersOrder 35 copies of selected text from campus bookstore. Delivery expected 2 weeks. | [6]In Session Verification
RE
Intro Python - Course Ready ReviewVerify room setup, test projector/audio, confirm roster one week before start. Verification
SM
SQL Advanced - Instructor Test SessionHold test class with Dr. Chen to verify demo data and SQL environment. Verification
FL
Web Dev - LMS Course Shell CheckVerify all modules, assignments, and discussion forums are accessible in learning system. Verification
IS
Data Science - Lab Access VerificationConfirm all 18 enrolled students have GPU workstation access and software licenses. Verification
IS
Mobile App - Emulator Compatibility TestTest iOS and Android emulators on sample projects with all enrolled students. Verification
DM
Business Analytics - First Week MaterialsVerify textbooks received, prepare first week readings and assignment packets. | [6]Archived Course-Active
RE
Intro Python - Semester OpenCourse launched with 30 students. First assignment posted and class meets Monday. Course-Active
SM
SQL Advanced - First Lecture CompleteDr. Chen's first lecture delivered to 22 students. Lab exercises assigned. Course-Active
FL
Web Development - Full Enrollment ActiveCourse officially running with 28 students. Discussion forums active with peer engagement. Course-Active
IS
Data Science - Lab Sessions UnderwayAll GPU workstations operational. Students completing week 1 capstone project setup. Course-Active
IS
Mobile App Dev - First Project SubmittedAll 25 students submitted Hello World starter app successfully to the LMS. Course-Active
DM
Business Analytics - Textbooks DistributedAll 35 copies of textbook available at campus bookstore and student pickup complete. |
This sample demonstrates the toggle column feature in the Blazor Kanban component by visualizing a Course Scheduling, allowing users to collapse or expand columns using the header button. In this demo, the Testing column is initially collapsed.
The Kanban component enables column collapse/expand to optimize screen space. Remaining columns automatically stretch to occupy free space. Configure this behavior using the following KanbanColumn properties:
- AllowToggle – Enables column expand/collapse.
- IsExpanded – Determines initial expand/collapse state.
Additional essential interactions that enhance analysis and control are also featured:
- Toggle Columns: Collapse and expand columns to focus on the workflow stages that matter.
- Columns: Group cards by workflow stage such as To Do, In Progress, Testing, and Done.
- Drag and Drop: Move cards between the visible columns to update their workflow status.
Key interactive features demonstrated in this sample include:
- Initial State: The Testing column is collapsed by default using the
IsExpandedproperty. - Header Toggle: Use the chevron in any column header to collapse or expand the column on demand.
- Auto Layout: The remaining columns automatically stretch to occupy the freed space when a column is collapsed.
- Card Persistence: Cards in collapsed columns remain in the data source and reappear when the column is expanded again.
The Column Configuration highlights the building blocks of toggle behavior:
- AllowToggle: Enables or disables the toggle button on the column header.
- IsExpanded: Controls the initial expand or collapse state of the column.
- Auto Resize: The board rebalances the visible columns when a column is toggled.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.