Blazor Kanban Board - Observable Collection Binding
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
To Do - 3 items | In Progress - 6 items | Testing - 6 items | Done - 5 items |
|---|
[3]To Do Task
Task 10003Test the application in the IE browser. Task
Task 100012Improve application performance Task
Task 100017Test the application in the IE browser. | [6]In Progress Task
Task 10002Analyze the new requirements gathered from the customer. Task
Task 10004Test the application in the IE browser. Task
Task 10006Improve application performance Task
Task 10007Analyze the new requirements gathered from the customer. Task
Task 100014Fix the issues reported in the IE browser. Task
Task 100020Validate new requirements | [6]Testing Task
Task 10008Validate new requirements Task
Task 10009Analyze the new requirements gathered from the customer. Task
Task 100010Analyze the new requirements gathered from the customer. Task
Task 100011Improve application performance Task
Task 100015Fix the issues reported in the IE browser. Task
Task 100018Test the application in the IE browser. | [5]Done Task
Task 10001Validate new requirements Task
Task 10005Validate new requirements Task
Task 100013Fix the issues reported in the IE browser. Task
Task 100016Test the application in the IE browser. Task
Task 100019Improve application performance |
This sample demonstrates data binding with ObservableCollection in the Blazor Kanban component by visualizing a software development task tracker. The board reflects real-time changes when cards are added, removed, or updated through the action buttons.
When using ObservableCollection, the Kanban UI updates automatically as items are added or removed from the data source. For property-level updates, implement INotifyPropertyChanged on the data model to refresh UI on value changes.
Additional essential interactions that enhance analysis and control are also featured:
- Data Binding: Bind an
ObservableCollectionto the KanbanDataSourceproperty to enable live updates. - Dialog Editing: Add and edit cards through the card editor dialog driven by the observable collection.
- Columns: Group cards by workflow stage such as To Do, In Progress, Testing, and Done.
Key interactive features demonstrated in this sample include:
- Add Card: Click the Add Card button to insert a new task into the observable collection. The board updates immediately.
- Delete Card: Click the Delete Card button to remove a task. The board reflects the change without a page reload.
- Update Card: Click the Update Card button to modify a task property. The board updates in real time.
- Toast Notification: A toast message confirms each action so the user knows the change was applied.
The Data Configuration highlights the building blocks of observable data binding:
- ObservableCollection: The data source is an
ObservableCollectionthat fires change notifications. - INotifyPropertyChanged: The data model implements
INotifyPropertyChangedto notify on property updates. - Action Buttons: The Add, Delete, and Update actions mutate the collection and surface a confirmation toast.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.