Data Binding in Blazor QueryBuilder Component

4 Nov 202511 minutes to read

The Blazor Query Builder uses SfDataManager to bind the data source and supports both RESTful JSON data services and IEnumerable collections. The DataSource property accepts either an instance of SfDataManager or a list of objects. It supports the following data binding methods:

• List Binding
• Remote data

NOTE

When using DataSource as IEnumerable<T>, the component type (TValue) is inferred from the data. When using SfDataManager, set TValue explicitly on the Query Builder component.

List Binding

To bind list data to the Blazor Query Builder, assign the DataSource property to a list of objects. Define columns to control field display names, types, and formatting.

@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 the Blazor Query Builder, use SfDataManager with the appropriate adaptor and set the service endpoint Url. Define columns to control field labels, types, and formatting when binding to remote data. Ensure the endpoint is accessible from the client (CORS/HTTPS as applicable).

Refer to the following code examples for remote data binding with OData, OData v4, and Web API services.

Binding with OData services

OData is a standardized protocol for creating and consuming data. Use ODataAdaptor with SfDataManager to retrieve data from OData services.

@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

OData v4 is an improved version of the OData protocol. Use ODataV4Adaptor with SfDataManager to consume OData v4 services. For more details, see the OData documentation.

@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

Use WebApiAdaptor to bind the Query Builder to RESTful Web API endpoints that return JSON data.

@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; }
    }
}

Complex Data Binding

Complex data binding allows you to work with nested objects and subfields. Bind complex data using nested columns or by specifying a complex data source with a Separator that defines the path delimiter used in field names.

@using Syncfusion.Blazor.QueryBuilder

<SfQueryBuilder TValue="Complex" Separator="." @ref="QueryBuilderObj">
    <QueryBuilderRule Condition="or" Rules="@Rules"></QueryBuilderRule>
    <QueryBuilderColumns>
        <QueryBuilderColumn Field="Employee" Label="Employee" Type="ColumnType.Object">
            <QueryBuilderColumns>
                <QueryBuilderColumn Field="ID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
                <QueryBuilderColumn Field="DOB" Label="Date of birth" Type="ColumnType.Date"></QueryBuilderColumn>
                <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
                <QueryBuilderColumn Field="Salary" Label="Salary" Type="ColumnType.Number"></QueryBuilderColumn>
                <QueryBuilderColumn Field="Age" Label="Age" Type="ColumnType.Number"></QueryBuilderColumn>
                <QueryBuilderColumn Field="Title" Label="Title" Type="ColumnType.String"></QueryBuilderColumn>
            </QueryBuilderColumns>
        </QueryBuilderColumn>
        <QueryBuilderColumn Field="Name" Label="Name" Type="ColumnType.Object">
            <QueryBuilderColumns>
                <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>
                <QueryBuilderColumn Field="LasttName" Label="Last Name" Type="ColumnType.String"></QueryBuilderColumn>
            </QueryBuilderColumns>
        </QueryBuilderColumn>
        <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.Object">
            <QueryBuilderColumns>
                <QueryBuilderColumn Field="State" Label="State" Type="ColumnType.Object">
                    <QueryBuilderColumns>
                        <QueryBuilderColumn Field="City" Label="City" Type="ColumnType.String"></QueryBuilderColumn>
                        <QueryBuilderColumn Field="ZipCode" Label="Zip Code" Type="ColumnType.String"></QueryBuilderColumn>
                    </QueryBuilderColumns>
                </QueryBuilderColumn>
                <QueryBuilderColumn Field="Region" Label="Region" Type="ColumnType.String"></QueryBuilderColumn>
                <QueryBuilderColumn Field="Name" Label="Name" Type="ColumnType.String"></QueryBuilderColumn>
            </QueryBuilderColumns>
        </QueryBuilderColumn>
    </QueryBuilderColumns>
</SfQueryBuilder>
@code {
    SfQueryBuilder<Complex> QueryBuilderObj;
    List<RuleModel> Rules = new List<RuleModel>()
    {
        new RuleModel { Field="Employee.ID", Label="ID", Type="Number", Operator="equal", Value = 1001 },
        new RuleModel { Field="Name.FirstName", Label="First Name", Type="String", Operator="equal", Value = "Mark" },
        new RuleModel { Field="Country.State.City", Label="City", Type="String", Operator="equal", Value = "Jersey City" }
    };
    public class Employee
    {
        public string ID { get; set; }
        public DateTime DOB { get; set; }
        public DateTime HireDate { get; set; }
        public int Salary { get; set; }
        public int Age { get; set; }
        public string Title { get; set; }
    }
    public class Country
    {
        public State State { get; set; }
        public string Region { get; set; }
        public string Name { get; set; }
    }
    public class State
    {
        public string City { get; set; }
        public int Zipcode { get; set; }
    }
    public class Name
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
    public class Complex
    {
        public Employee Employee { get; set; }
        public Name Name { get; set; }
        public Country Country { get; set; }
    }
}

NOTE

Explore the Blazor Query Builder example to know how to render and configure the Query Builder.