Blazor Kanban Board - DynamicObject Binding
To Do - 7 items | In Progress - 3 items | Testing - 5 items | Done - 5 items |
|---|
[7]To Do Task
Task 10003Test the application in the IE browser. Task
Task 10004Validate new requirements Task
Task 10007Fix the issues reported in the IE browser. Task
Task 10009Improve application performance Task
Task 100014Validate new requirements Task
Task 100015Improve application performance Task
Task 100018Improve application performance | [3]In Progress Task
Task 10008Fix the issues reported in the IE browser. Task
Task 100011Validate new requirements Task
Task 100017Analyze the new requirements gathered from the customer. | [5]Testing Task
Task 10002Improve application performance Task
Task 10005Analyze the new requirements gathered from the customer. Task
Task 100012Analyze the new requirements gathered from the customer. Task
Task 100016Analyze the new requirements gathered from the customer. Task
Task 100019Analyze the new requirements gathered from the customer. | [5]Done Task
Task 10001Improve application performance Task
Task 10006Test the application in the IE browser. Task
Task 100010Analyze the new requirements gathered from the customer. Task
Task 100013Fix the issues reported in the IE browser. Task
Task 100020Fix the issues reported in the IE browser. |
This sample demonstrates data binding with a DynamicObject collection and supports CRUD operations in the Blazor Kanban component by visualizing a software development task tracker. Cards are generated dynamically with random status, summary, and assignee values.
In this demo, a DynamicObject collection is bound to the Kanban DataSource property. Override GetDynamicMemberNames in the DynamicObject class and return property names to enable data operations and editing.
Additional essential interactions that enhance analysis and control are also featured:
- Data Binding: Bind a
DynamicObjectcollection to the KanbanDataSourceproperty. - Dialog Editing: Add, update, and delete cards directly from the card editor dialog.
- Columns: Group cards by workflow stage such as To Do, In Progress, Testing, and Done.
Key interactive features demonstrated in this sample include:
- Dynamic Generation: 20 tasks are generated at runtime with random status, summary, and assignee values.
- Allow Adding: The
AllowAddingflag on each column enables the plus button to add new cards. - Edit Cards: Double-click any card to open the editor dialog and modify the underlying dynamic data.
- Delete Cards: Use the delete action in the editor dialog to remove a card from the dynamic collection.
The Data Configuration highlights the building blocks of dynamic data binding:
- DynamicDictionary: A custom
DynamicObjectsubclass that stores values in an internal dictionary. - GetDynamicMemberNames: Overrides the method to expose the property names so the Kanban can read and edit values.
- DataSource: The
DynamicObjectcollection is assigned to the KanbanDataSourceproperty.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.