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 - 7 items | In Progress - 3 items | Testing - 4 items | Done - 6 items |
|---|
[7]To Do Task
Task 10001Test the application in the IE browser. Task
Task 10002Analyze the new requirements gathered from the customer. Task
Task 10004Analyze the new requirements gathered from the customer. Task
Task 10005Analyze the new requirements gathered from the customer. Task
Task 10006Analyze the new requirements gathered from the customer. Task
Task 100018Improve application performance Task
Task 100020Validate new requirements | [3]In Progress Task
Task 100012Analyze the new requirements gathered from the customer. Task
Task 100014Improve application performance Task
Task 100017Validate new requirements | [4]Testing Task
Task 10003Validate new requirements Task
Task 10008Test the application in the IE browser. Task
Task 100013Analyze the new requirements gathered from the customer. Task
Task 100016Test the application in the IE browser. | [6]Done Task
Task 10007Analyze the new requirements gathered from the customer. Task
Task 10009Validate new requirements Task
Task 100010Fix the issues reported in the IE browser. Task
Task 100011Analyze the new requirements gathered from the customer. Task
Task 100015Fix the issues reported in the IE browser. Task
Task 100019Test the application in the IE browser. |
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.