Data Binding in Blazor QueryBuilder component
The Blazor Query Builder uses SfDataManager to bind the dataSource which supports both RESTful JSON data services binding and IEnumerable binding. The DataSource property can be assigned either with the instance of SfDataManager or list of objects. It supports the following kinds of data binding method:
- List Binding
- Remote data
When using DataSource as
IEnumerable<T>component type(TValue) will be inferred from its value. When using SfDataManager for data binding then the TValue must be provided explicitly in the querybuilder component.
List Binding
To bind list datas to the Blazor Query Builder, you can assign the DataSource property with a list of datas.
@using Syncfusion.Blazor.QueryBuilder
<SfQueryBuilder DataSource="@EmployeeData">
<QueryBuilderRule Condition="or" Rules="@Rules"></QueryBuilderRule>
<QueryBuilderColumns>
<QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
<QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>
<QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
<QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
</QueryBuilderColumns>
</SfQueryBuilder>
@code {
//Rules binding
List<RuleModel> Rules = new List<RuleModel>()
{
new RuleModel { Field="Country", Label="Country", Type="String", Operator="equal", Value = "England" },
new RuleModel { Field="EmployeeID", Label="EmployeeID", Type="Number", Operator="notequal", Value = 1001 }
};
//List Datas
public List<EmployeeDetails> EmployeeData = new List<EmployeeDetails>
{
new EmployeeDetails{ FirstName = "Martin", EmployeeID = 1001, Country = "England", City = "Manchester", HireDate = new DateTime(2014, 4, 23) },
new EmployeeDetails{ FirstName = "Benjamin", EmployeeID = 1002, Country = "England", City = "Birmingham", HireDate = new DateTime(2014, 6, 19) },
new EmployeeDetails{ FirstName = "Stuart", EmployeeID = 1003, Country = "England", City = "London", HireDate = new DateTime(2014, 7, 4) },
new EmployeeDetails{ FirstName = "Ben", EmployeeID = 1004, Country = "USA", City = "California", HireDate = new DateTime(2014, 8, 15) },
new EmployeeDetails{ FirstName = "Joseph", EmployeeID = 1005, Country = "Spain", City = "Madrid", HireDate = new DateTime(2014, 8, 29) }
};
public class EmployeeDetails
{
public string FirstName { get; set; }
public int EmployeeID { get; set; }
public string Country { get; set; }
public string City { get; set; }
public DateTime HireDate { get; set; }
}
}Remote Data
To bind remote data to Blazor Query Builder component, assign service data as an instance of SfDataManager to the DataSource property or by using SfDataManager component. To interact with remote data source, provide the endpoint Url.
Refer to the following code example for remote Data binding using OData service.
Binding with OData services
OData is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the SfDataManager. Refer to the following code example for remote Data binding using OData service.
@using Syncfusion.Blazor.QueryBuilder
@using Syncfusion.Blazor.Data
<SfQueryBuilder TValue="OrderDetails" Width="70%">
<SfDataManager Url="https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"></SfDataManager>
</SfQueryBuilder>
@code {
public class OrderDetails
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime? ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
}Binding with OData v4 services
The ODataV4 is an improved version of OData protocols, and the SfDataManager can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the OData documentation. To bind OData v4 service, use the ODataV4Adaptor.
@using Syncfusion.Blazor.QueryBuilder
@using Syncfusion.Blazor.Data
<SfQueryBuilder TValue="OrderDetails" Width="70%">
<SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor"></SfDataManager>
</SfQueryBuilder>
@code {
public class OrderDetails
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime? ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
}Web API
You can use WebApiAdaptor to bind querybuilder with Web API created using OData endpoint.
@using Syncfusion.Blazor.QueryBuilder
@using Syncfusion.Blazor.Data
<SfQueryBuilder TValue="OrderDetails">
<SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
</SfQueryBuilder>
@code {
public class OrderDetails
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime? ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
}Output will be shown as
You can also explore our Blazor Query Builder example to knows how to render and configure the query builder.