Search results

Importing

Importing allows you to view or edit the predefined conditions which is available in JSON or SQL. You can import the conditions either initial rendering or post rendering.

Initial rendering

To apply conditions initially, you can define the Rule. Here, you can import structured JSON object by defining the Rule property.

@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

Post rendering

Importing from JSON

You can set the conditions from structured JSON object through the SetRules method.

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

<EjsQueryBuilder Columns="@Columns" DataSource="@EmployeeDetails" @ref="QueryBuilderObj"></EjsQueryBuilder>
<EjsButton CssClass="e-primary" onclick="setRules">Set Rules</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 = "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" }
    }
};

private void setRules()
    {
        QueryBuilderObj.SetRules(ImportRules);
    }
}

Output will be shown as

QueryBuilder Sample

Importing from SQL

You can set the conditions from SQL query through the SetRulesFromSql method.

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

<EjsQueryBuilder Columns="@Columns" DataSource="@EmployeeDetails" @ref="QueryBuilderObj"></EjsQueryBuilder>
<EjsButton CssClass="e-primary" onclick="setRules">Set Rules</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 = "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; }
    }

private void setRules()
    {
        QueryBuilderObj.SetRulesFromSql("EmployeeID = 1001 and City LIKE ('%Manchester')");
    }
}

Output will be shown as

QueryBuilder Sample

Exporting

Exporting allows you to save or maintain the created conditions through the Query Builder. You can export the defined conditions by the following ways.

Exporting to JSON

You can export the defined conditions to structured JSON object through the GetValidRules method.

Exporting to SQL

You can export the defined conditions to SQL query through the GetRulesFromSql method.

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

<EjsQueryBuilder @ref="QueryBuilderObj" Columns="@Columns" DataSource="@EmployeeDetails" Rule="@ImportRules"></EjsQueryBuilder>
<EjsButton CssClass="e-primary" onclick="getRules">Get Rules</EjsButton>
<EjsButton CssClass="e-primary" onclick="getSql">Get SQL</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 = "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" }
        }
    };

    private async void getSql()
    {
        RuleModel rule = await QueryBuilderObj.GetValidRules(QueryBuilderObj.Rule);
        string sql = await QueryBuilderObj.GetSqlFromRules(rule);
    }

    private async void getRules()
    {
        RuleModel rule = await QueryBuilderObj.GetValidRules(QueryBuilderObj.Rule);
    }
 }