QueryBuilderObj.Rule not updating when changed v47

[Scott Peal]

If you put a query builder on a page with a save button. In the save event the QueryBuilderObj.Rule method is not showing the changed values for Condition nor Rules. 

    protected async void OnClick_Save(MouseEventArgs args)

        {

            // Get the SQL to save to database

            QueryBuilderObj.Refresh();

            RuleModel actRule = new RuleModel()

            {

                Condition = QueryBuilderObj.Rule.Condition,    // Value not updated 

                Rules = QueryBuilderObj.Rule.Rules                    // Value not updated 

            };

            RuleModel rule = await QueryBuilderObj.GetValidRules(actRule);

            string sql = await QueryBuilderObj.GetSqlFromRules(rule);

}

    < EjsDialog Width="80%">

        < DialogPositionData X="Center" Y="Top">

        < DialogTemplates>

            < Content>

                < EjsTextBox @ref="QueryEditorTextbox" Placeholder="Name" @bind-Value="SelectedNode.Name">

                < EjsQueryBuilder @ref="QueryBuilderObj" DataSource="@DataSource" Rule="ImportRules" >

                    < QueryBuilderColumns>

                        < QueryBuilderColumn Field="Name" Label="Name" Type="string">

                        < QueryBuilderColumn Field="Code" Label="Code" Type="string">

                    < /QueryBuilderColumns>

                < /EjsQueryBuilder>

                < EjsButton CssClass="e-primary" @onclick="OnClick_Save">Save

            < /Content>

        < /DialogTemplates>

    < /EjsDialog>

[Saranya Dhayalan]

Hi Scott, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported issue, we are not able to reproduce it in our end. Please use the  GetRules method in the button click event. Please find the below code snippet: 

 

@using Syncfusion.EJ2.Blazor.QueryBuilder 

@using Syncfusion.EJ2.Blazor.Buttons 

 

<EjsQueryBuilder Columns="@Columns" DataSource="@EmployeeDetails" @ref="QueryBuilderObj" Rule="@ImportRules"></EjsQueryBuilder> 

<EjsButton CssClass="e-primary" @onclick="setRules">Set 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; } 

    } 

 

    protected QueryBuilderRule ImportRules = new QueryBuilderRule() 

    { 

        Condition = "and", 

        Rules = new List<RuleModel>() 

            { 

                new RuleModel { Label="FirstName", Field="FirstName", Type="strig", Operator="equal", Value = "Martin" }, 

                new RuleModel { Label="EmployeeID", Field="EmployeeID", Type="string", Operator="equal", Value = "1001" } 

            } 

    }; 

    protected void setRules() 

    { 

        QueryBuilderObj.SetRulesFromSql("FirstName LIKE ('%Ch%')"); 

    } 

    protected async void getSql() 

    { 

        RuleModel actRule = await QueryBuilderObj.GetRules();  

        RuleModel rule = await QueryBuilderObj.GetValidRules(actRule); 

        string sql = await QueryBuilderObj.GetSqlFromRules(rule);           // returns the original ImportRules and not the setRules 

    } 

} 

 

 

Please find the below documentation link: 

 

https://ej2.syncfusion.com/blazor/documentation/query-builder/import-export/ 

 

For your convenience we have prepared a sample. Please find the below sample link: 

  

Sample link: https://www.syncfusion.com/downloads/support/forum/150968/ze/BlazorApp91078259764 

 

Could you please check the above sample and reproduce your reported issue in the above sample and get back to us if you need further assistance on this? 

 

Regards, 

Saranya D