Blazor Kanban Board - Remote Data Binding
This sample demonstrates binding remote data to the Blazor Kanban component using the DataManager by visualizing a software development task tracker. The board fetches bug reports and feature requests from a remote endpoint and groups them by workflow status.
Assign an instance of DataManager to the Kanban DataSource to enable remote data binding. The DataManager acts as an interface between the service endpoint and the Kanban component and requires the following minimal configuration:
- DataManager.Url – Defines the endpoint to fetch data.
- DataManager.Adaptor – Specifies the adaptor. By default,
ODataAdaptoris used. The adaptor processes requests/responses. The Syncfusion.Blazor.Data package includes adaptors like:UrlAdaptor– Interact with generic remote services.ODataAdaptor– For OData endpoints.ODataV4Adaptor– For OData V4 endpoints.WebApiAdaptor– For Web API endpoints under OData standards.WebMethodAdaptor– For web methods.
Additional essential interactions that enhance analysis and control are also featured:
- Columns: Group cards by workflow stage such as To Do, In Progress, Testing, and Done.
- Data Binding: Fetch cards on demand from a remote endpoint using a configured
SfDataManager. - Dialog Cancel: The default card dialog is suppressed so the board behaves as a read-only tracker.
Key interactive features demonstrated in this sample include:
- Remote Data Binding: Cards are fetched from a remote service through
SfDataManagerusing theWebApiAdaptor. - Cross Domain Support: The
CrossDomainflag onSfDataManagerenables requests to the hosted demo endpoint. - Disabled Drag and Drop: Drag and drop is disabled in this demo so the remote state is not mutated from the client.
- Read-only Board: The default edit dialog is cancelled via the
DialogOpenevent to keep the board display-only.
The Data Binding panel highlights the supported ways to populate the board from a remote source:
- SfDataManager: A
SfDataManageris assigned directly to the KanbanDataSourceproperty to wire up remote data. - Adaptor Selection: The
WebApiAdaptoris used to communicate with the Web API endpoint exposed by Syncfusion. - Column Mapping: The
KeyFieldon each column maps to theStatusfield returned by the remote service.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.