Search results

Filtering

Query Builder allows you to create or delete conditions and groups. You can use ShowButtons to enable/disable these buttons.

You can create or delete conditions by interacting through the user interface and methods.

Use the AddRules, and DeleteRules methods to create/delete conditions. Use AddGroups, and DeleteGroups methods to create/delete groups.

@using Syncfusion.EJ2.Blazor.QueryBuilder
@using Syncfusion.EJ2.Blazor.Buttons

<EjsQueryBuilder Columns="@Columns" Rule="ImportRules" @ref="QuerybuilderObj"></EjsQueryBuilder>
<EjsButton onclick="addRule" IsPrimary="true" Content="Add Rules"></EjsButton>
<EjsButton onclick="addGroup" IsPrimary="true" Content="Add Group"></EjsButton>
<EjsButton onclick="deleteGroups" IsPrimary="true" Content="Delete Groups"></EjsButton>

@code {
    EjsQueryBuilder QuerybuilderObj;
    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 = "dd/MM/yyyy"},
            new QueryBuilderColumn{ Field = "Country", Label = "Country", Type="string"},
            new QueryBuilderColumn{ Field = "City", Label = "City", Type = "string"}
    };

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

    public List<RuleModel> Rules = new List<RuleModel> {
        new RuleModel{ Label = "Employee ID", Field = "EmployeeID", Type = "number", Operator = "equal", Value = "1091" }
    };

    public List<RuleModel> Groups = new List<RuleModel> {
        new RuleModel{ Condition = "or", Rules = new List<RuleModel>{
            new RuleModel { Label = "Employee ID", Field = "EmployeeID", Type = "number", Operator = "equal", Value = "1091" } } }

    };

    public string[] GroupID = new string[] {"group1"};

    private void addRule()
    {
        this.QuerybuilderObj.AddRules(Rules, "group0");
    }

    private void addGroup()
    {
        this.QuerybuilderObj.AddGroups(Groups, "group0");
    }

    private void deleteGroups()
    {
        this.QuerybuilderObj.DeleteGroups(GroupID);
    }
}

Output will be shown as

QueryBuilder Sample