Implements Syncfusion Blazor SfDataManager for data access, data binding, and adaptor configuration in Blazor Server, WebAssembly, and Web App. Used when binding components like SfGrid and SfDropDownList to local or remote data sources, choosing adaptors (UrlAdaptor, ODataAdaptor, WebApiAdaptor, GraphQLAdaptor), or performing CRUD. Includes custom binding using DataAdaptor, DataManagerRequest, DataOperations, and the Syncfusion.Blazor.Data package.
The Syncfusion Blazor SfDataManager is the data access layer for all Syncfusion data-bound components. It acts as a gateway between your data source — local in-memory collections or remote REST/OData/GraphQL services — and components like SfGrid, SfDropDownList, and others. It handles querying, sorting, filtering, paging, and CRUD operations through a configurable adaptor model.
SfDataManager in a new Blazor project (WASM or Web App)Json propertyUrl + AdaptorDataAdaptorWhen binding to remote services, you MUST implement these protections:
HashSet<string> or configuration file; validate all URLs before assignment; never accept dynamic URLs from user input, query parameters, or untrusted sourcesOnInitialized() lifecycle method to verify endpoints against whitelist before binding* in production; require HTTPSThird-party API responses can introduce security risks. Always verify endpoint legitimacy, authenticate requests, and validate data before binding to UI components.
| Property | Purpose |
|---|---|
Json | Bind in-memory collection (local data) |
Url | Remote service endpoint |
Adaptor | Specifies how requests/responses are processed |
AdaptorInstance | Type reference for CustomAdaptor |
Headers | Custom HTTP headers for all outbound requests |
Offline | Enable client-side processing after initial remote fetch |
GraphQLAdaptorOptions | Query/mutation configuration for GraphQL services |
📄 Read: references/getting-started.md
Syncfusion.Blazor.Data + Syncfusion.Blazor.Themes)Program.csSfGridSfDropDownList (local and remote)📄 Read: references/data-binding.md
Json property with in-memory collectionsUrl + Adaptor propertiesSfGrid and SfDropDownList examples📄 Read: references/adaptors.md
UrlAdaptor — base adaptor for custom REST servicesODataAdaptor — OData v3 protocolODataV4Adaptor — OData v4 protocolWebApiAdaptor — Web API endpoints with OData query supportresult + count)📄 Read: references/graphql-adaptor.md
GraphQLAdaptorOptions configuration (Query, ResolverName)Insert, Update, DeleteBatch mutation propertyDataManagerRequest model used by server resolversProgram.cs configuration (schema, CORS)📄 Read: references/custom-binding.md
DataAdaptor abstract class — available virtual methodsRead/ReadAsync with DataOperations helper methodsInsert, Update, Remove, BatchUpdateCustomAdaptor implementation with SfGrid example📄 Read: references/how-to.md
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Grids
<SfGrid TValue="EmployeeData" ID="Grid">
<SfDataManager Json="@Employees"></SfDataManager>
<GridColumns>
<GridColumn Field="@nameof(EmployeeData.EmployeeID)" HeaderText="Employee ID" Width="120"></GridColumn>
<GridColumn Field="@nameof(EmployeeData.Name)" HeaderText="First Name" Width="130"></GridColumn>
<GridColumn Field="@nameof(EmployeeData.Title)" HeaderText="Title" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public class EmployeeData
{
public int EmployeeID { get; set; }
public string Name { get; set; }
public string Title { get; set; }
}
public List<EmployeeData> Employees = new()
{
new EmployeeData { EmployeeID = 1, Name = "Nancy Fuller", Title = "Vice President" },
new EmployeeData { EmployeeID = 2, Name = "Steven Buchanan", Title = "Sales Manager" }
};
}
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Grids
<!-- SECURITY: Use string variables for endpoints, validate against whitelist, use HTTPS only -->
<SfGrid TValue="Order" AllowPaging="true">
<SfDataManager Url="@ODataEndpointUrl"
Adaptor="Adaptors.ODataAdaptor">
</SfDataManager>
<GridColumns>
<GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120"></GridColumn>
<GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer Name" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code {
// Whitelist of trusted OData endpoints — define in appsettings.json in production
private static readonly HashSet<string> TrustedEndpoints = new()
{
"https://api.yourtrusted-domain.com/odata/"
};
// Assigned string variable for endpoint
private string ODataEndpointUrl { get; set; } = string.Empty;
protected override void OnInitialized()
{
// Validate and assign endpoint from configuration
const string endpointBase = "https://api.yourtrusted-domain.com/odata/Orders";
if (!TrustedEndpoints.Any(trusted => endpointBase.StartsWith(trusted)))
throw new InvalidOperationException($"Security validation failed: untrusted endpoint '{endpointBase}'");
ODataEndpointUrl = endpointBase;
}
public class Order
{
public int? OrderID { get; set; }
public string? CustomerID { get; set; }
}
}
| Backend Type | Adaptor to Use |
|---|---|
Custom REST API returning { result, count } | Adaptors.UrlAdaptor |
| OData v3 service | Adaptors.ODataAdaptor |
| OData v4 service | Adaptors.ODataV4Adaptor |
| ASP.NET Web API with OData query support | Adaptors.WebApiAdaptor |
| GraphQL service | Adaptors.GraphQLAdaptor |
| Non-standard source / full custom control | Adaptors.CustomAdaptor |
SfDataManager is always placed as a child component inside the data-bound Syncfusion component:
<SfGrid TValue="MyModel">
<SfDataManager Url="..." Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
<GridColumns>...</GridColumns>
</SfGrid>
When using CustomAdaptor with CRUD operations, configure the Grid toolbar and edit settings alongside the adaptor:
<SfGrid TValue="Order" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })">
<SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>
<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings>
...
</SfGrid>