Search results

Filtering in Blazor QueryBuilder component

22 Jul 2021 / 2 minutes to read

The Blazor 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.

Copied to clipboard
@using Syncfusion.Blazor.QueryBuilder
@using Syncfusion.Blazor.Buttons

<SfQueryBuilder TValue="EmployeeDetails" @ref="QuerybuilderObj">
<QueryBuilderShowButtons RuleDelete="true" GroupDelete="true" GroupInsert="true"></QueryBuilderShowButtons>
<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="TitleOfCourtesy" Label="Title Of Courtesy" Type="ColumnType.Boolean"></QueryBuilderColumn>
    <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date" Format="MM/dd/yyyy"></QueryBuilderColumn>
    <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
</QueryBuilderColumns>
</SfQueryBuilder>

<SfButton @onclick="addRule" IsPrimary="true" Content="Add Rules"></SfButton>
<SfButton @onclick="addGroup" IsPrimary="true" Content="Add Group"></SfButton>
<SfButton @onclick="deleteGroups" IsPrimary="true" Content="Delete Groups"></SfButton>

@code {
SfQueryBuilder<EmployeeDetails> QuerybuilderObj;
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 }
};

RuleModel SampRule = new RuleModel()
{
    Label = "Employee ID",
    Field = "EmployeeID",
    Type = "Number",
    Operator = "equal",
    Value = 1091
};

RuleModel SampGroup = 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()
{
    QuerybuilderObj.AddRule(SampRule, "group0");
}

private void addGroup()
{
    QuerybuilderObj.AddGroup(SampGroup, "group0");
}

private void deleteGroups()
{
    QuerybuilderObj.DeleteGroup("group1");
}

public class EmployeeDetails
{
    public int EmployeeID { get; set; }
    public string FirstName { get; set; }
    public bool TitleOfCourtesy { get; set; }
    public string Title { get; set; }
    public DateTime HireDate { get; set; }
    public string Country { get; set; }
    public string City { get; set; }
}
}

Output will be shown as

Query Builder Sample

You can also explore our Blazor Query Builder example to knows how to render and configure the query builder.