Search results

Data binding

The Query Builder uses DataManager to bind the dataSource which supports both RESTful JSON data services binding and local object binding. The DataSource property can be assigned either with the instance of DataManager or object collection.

Local data

To bind local data to the query builder, you can assign the DataSource property with a list of object.

@using Syncfusion.EJ2.Blazor.QueryBuilder

<EjsQueryBuilder Columns="@Columns" DataSource="@EmployeeDetails" Rule="@ImportRules"></EjsQueryBuilder>

@code {
    public List<QueryBuilderColumn> Columns = new List<QueryBuilderColumn>
    {
            new QueryBuilderColumn{ Field = "EmployeeID", Label = "Employee ID", Type = "number" },
            new QueryBuilderColumn{ Field = "FirstName", Label = "First Name", Type = "string" },
            new QueryBuilderColumn{ Field = "TitleOfCourtesy", Label ="Title of Courtesy", Type = "boolean"},
            new QueryBuilderColumn{ Field = "Title", Label = "Title", Type = "boolean", Values = new List<string>{ "Mr.", "Mrs." } },
            new QueryBuilderColumn{ Field = "HireDate", Label = "Hire Date", Type = "date", Format = "MM/dd/yyyy"},
            new QueryBuilderColumn{ Field = "Country", Label = "Country", Type="string"},
            new QueryBuilderColumn{ Field = "City", Label = "City", Type = "string"}
        };
    public List<Employee> EmployeeDetails = new List<Employee>
        {
        new Employee{ FirstName = "Martin", EmployeeID = "1001", Country = "England", City = "Manchester", HireDate = "23/04/2014" },
        new Employee{ FirstName = "Benjamin", EmployeeID = "1002", Country = "England", City = "Birmingham", HireDate = "19/06/2014" },
        new Employee{ FirstName = "Stuart", EmployeeID = "1003", Country = "England", City = "London", HireDate = "04/07/2014"},
        new Employee{ FirstName = "Ben", EmployeeID = "1004", Country = "USA", City = "California", HireDate = "15/08/2014" },
        new Employee{ FirstName = "Joseph", EmployeeID = "1005", Country = "Spain", City = "Madrid", HireDate = "29/08/2014" }
    };

    public class Employee {
        public string FirstName { get; set; }
        public string EmployeeID { get; set; }
        public string Country { get; set; }
        public string City { get; set; }
        public string HireDate { get; set; }
    }

    public QueryBuilderRule ImportRules = new QueryBuilderRule
    {
        Condition = "or",
        Rules = new List<RuleModel> { new RuleModel { Field = "EmployeeID", Value = "1001", Operator = "notequal" },
        new RuleModel { Field = "Country", Value = "England", Operator = "equal" } }
    };
}

Output will be shown as

QueryBuilder Sample

Remote Data

To bind remote data to QueryBuilder component, assign service data as an instance of EjsDataManager to the DataSource property or by using EjsDataManager component. To interact with remote data source, provide the endpoint Url.Refer to the following code example for remote Data binding using OData service.

@using Syncfusion.EJ2.Blazor.QueryBuilder
@using Syncfusion.EJ2.Blazor.Data

<EjsQueryBuilder>
    <EjsDataManager Url="https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders" Adaptor="Adaptors.ODataAdaptor"></EjsDataManager>
</EjsQueryBuilder>

Output will be shown as

QueryBuilder Sample