Syncfusion Blazor Query Builder is a rich and responsive user interface for filtering large amounts of data. We can use this to create or edit queries that can be combined with data visualization controls like DataGrid and Charts to view the filtered data. It can be populated using structured JSON as well as SQL queries. In this blog, I am going to walk you through the following five major features of the Blazor Query Builder control:
The Blazor Query Builder supports filtering data from a data source using the created conditions and provides the following types of outputs:
Data manager query
SQL query
Predicates
Data manager query: This is used in our Syncfusion components like DataGrid, Tree Grid, Charts, ListBox and other components. A user can directly communicate with the Query Builder with these components. You can get the created conditions as a data manager query using the GetDataManagerQuery method. We will briefly explain this in the data manager support section.
SQL query: You can use this to interact with and filter the data from databases. You can get the created conditions as a SQL query using the GetSqlFromRules method. You can easily replace this with the existing SQL query used in your application.
Predicates: You can use these to filter the data from entities directly without fetching all the records. You can get the created conditions as predicates using the GetPredicates method.
The following code example demonstrates the Predicates output. The data source referenced is a simple list.
You can integrate the data manager into the Blazor Query Builder to simplify the communication with a data source and return the desired result based on the provided conditions.
Note: The Blazor Query Builder supports all types of data sources supported by the data manager.
You can get the created conditions as a data manager query using the GetDataManagerQuery method.
In the following example, the data manager query is used in the DataGrid’s Query property to render the filtered records.
With Blazor Query Builder, you can import predefined conditions available in a list of rules or SQL query. You can also export the created conditions as a list of rules or SQL query.
Note: You can import the conditions either during initial rendering or after rendering.
The following code example demonstrates how to create a query builder with predefined rules.
<SfQueryBuilder TValue="Employee">
<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="LastName" Label="LastName" 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
{
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}
};
public class Employee
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public DateTime HireDate { get; set; }
public string Country { get; set; }
}
}
Users can set the conditions from the list of rules through the SetRules method and SQL query through the SetRulesFromSql method. In the following code example, we have explained the SetRulesFromSql method in the Set Rules button.
The following code example demonstrates how to set the rules from SQL in the Blazor Query Builder.
<div style="width: 100%; margin-bottom: 10px;">
<p>Enter the SQL Query</p>
<textarea style="width: 100%;" id='ruleContent' @bind="Description"></textarea>
</div>
<div style="margin-bottom: 10px">
<SfButton CssClass="e-primary" @>
Setting Rules from SQL Query in the Blazor Query Builder
Also, users can get the conditions as a list of rules using the GetRules method and a SQL query as the GetRulesFromSql method. In the following code example, we have used the GetRulesFromSql method on the button labelled Get Query.
The following code example demonstrates how to export the rules as SQL from the Blazor Query Builder.
To provide flexibility, the Blazor Query Builder offers template support. A template can include a mixture of static HTML and web controls. The Blazor Query Builder supports the following UI customizations:
Value template: To customize the value column of a rule.
Column template: To customize the entire rule.
Header template: To customize the header of a group.
Value template
You can render a custom UI to display the value column of a rule using the template property. In the following example, the Country field’s values are customized using the ValueTemplate property. A Dropdown List component is rendered for selecting the Country field value.
You can render a custom UI to display the entire rule using the ColumnTemplate property. In the following example, the Country field is customized using the ColumnTemplate property. In that, the operator is set to equal by default and a Dropdown List component renders for both field and value columns.
Users can render a custom UI to display the header of a group using the HeaderTemplate property.
<SfQueryBuilder TValue="Employee" @ref="QueryBuilderObj">
<QueryBuilderTemplates>
<HeaderTemplate>
<SfDropDownList ID="@context.ID" @bind-Value="DefaultCondition" TValue="string" TItem="Condition" CssClass="e-outline" Width="100px" DataSource="@ConditionsList">
<DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Condition" ValueChange="e => conditionChange(e, context)"></DropDownListEvents>
</SfDropDownList>
<div class="e-header">
<div class="e-content">
<SfButton Content="Add Group" CssClass="e-custom-button" @>
Customizing the Header of a Group in Blazor Query Builder
Grouping and sorting
You can sort the columns alphabetically and numerically using the SortDirection property. This property can be set to default, ascending, or descending.
You can group the columns using the Category property, which is inside the Columns property. The default name of the group is Other Fields.
The following code snippet demonstrates the grouping and sorting of columns in Blazor Query Builder.
<SfQueryBuilder TValue="Employee" SortDirection="SortDirection.Descending">
<QueryBuilderColumns>
<QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
<QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String" Category="Name"></QueryBuilderColumn>
<QueryBuilderColumn Field="LastName" Label="Last Name" Type="ColumnType.String" Category="Name"></QueryBuilderColumn>
<QueryBuilderColumn Field="BirthDate" Label="Birth Date" Type="ColumnType.Date" Category="Date"></QueryBuilderColumn>
<QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date" Category="Date"></QueryBuilderColumn>
<QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
</QueryBuilderColumns>
</SfQueryBuilder>
@code {
public class Employee
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public DateTime BirthDate { get; set; }
public DateTime HireDate { get; set; }
public string Country { get; set; }
}
}
Grouping and Sorting of Columns in Descending Order in Blazor Query Builder
Conclusion
I hope you now have a better understanding of the major features of the Blazor Query Builder control. With these features, you can easily fetch large volumes of data from a database. This saves lot of time and enhances your productivity.
For more info, go through our Blazor Query Builder’s user guide documentation and online demos. What else do you expect from this control? Please share your thoughts in the comments section.
If you’re already a Syncfusion user, you can download Essential Studio® for Blazor’s product setup to try out this control. Otherwise, you can download a free 30-day trial.
Satheeskumar works as a product manager at Syncfusion, where he specializes in the development of web components with cutting-edge technologies. He is interested in the latest web technologies and provides solutions for great products.