Localization in Blazor QueryBuilder Component

16 Dec 20215 minutes to read

The Localization library allows to localize default text content of the Query Builder. The Blazor Query Builder has static text that can be changed to other cultures (Arabic, Deutsch, French, etc.). In the following sample the text is changed to German culture.

Resource file (.resx) is used to translate the static text of the query builder.

Use Resource file to translate the static text of the QueryBuilder. The Resource file is an XML file which contains the strings (key and value pairs) that has to be translated into different language. Refer Localization link to know more about how to configure and use localization in the Blazor Server and Web Assembly project for Syncfusion Blazor components.

The following list of properties and its values are used in the Query Builder.

Locale key	en-US (default)
QueryBuilder_AddGroup	Add Group
QueryBuilder_AddCondition	Add Condition
QueryBuilder_DeleteRule	Remove this condition
QueryBuilder_DeleteGroup	Delete group
QueryBuilder_Edit	EDIT
QueryBuilder_SelectField	Select a field
QueryBuilder_SelectOperator	Select operator
QueryBuilder_StartsWith	Starts With
QueryBuilder_EndsWith	Ends With
QueryBuilder_Contains	Contains
QueryBuilder_Equal	Equal
QueryBuilder_NotEqual	Not Equal
QueryBuilder_LessThan	Less Than
QueryBuilder_LessThanOrEqual	Less Than Or Equal
QueryBuilder_GreaterThan	Greater Than
QueryBuilder_GreaterThanOrEqual	Greater Than Or Equal
QueryBuilder_Between	Between
QueryBuilder_NotBetween	Not Between
QueryBuilder_In	In
QueryBuilder_NotIn	Not In
QueryBuilder_Remove	REMOVE
QueryBuilder_ValidationMessage	This field is required
QueryBuilder_SummaryViewTitle	Summary View
QueryBuilder_OtherFields	Other Fields
QueryBuilder_AND	AND
QueryBuilder_OR	OR
QueryBuilder_SelectValue	Enter Value
QueryBuilder_IsEmpty	Is Empty
QueryBuilder_IsNotEmpty	Is Not Empty
QueryBuilder_IsNull	Is Null
QueryBuilder_IsNotNull	Is Not Null

@using Syncfusion.Blazor.QueryBuilder

<SfQueryBuilder TValue="EmployeeDetails">
    <QueryBuilderRule Condition="and" 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" Values="Values"></QueryBuilderColumn>
        <QueryBuilderColumn Field="Title" Label="Title" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
        <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
        <QueryBuilderColumn Field="City" Label="City" Type="ColumnType.String"></QueryBuilderColumn>
    </QueryBuilderColumns>
</SfQueryBuilder>

@code {
    private string[] Values = new string[] { "Mr.", "Mrs." };
    List<RuleModel> Rules = new List<RuleModel>()
    {
        new RuleModel { Field="EmployeeID", Label="Employee ID", Type="Number", Operator="equal", Value = 2345 }
    };
    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; }
    }
}

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