Query builder buttons trigger validation if inside an EditForm

[Michael Aston]

I have a QueryBuilder component inside an EditForm. If any of the three "Remove this condition" buttons are used then it triggers the validation on the EditForm. I guess this is happening because the buttons for some reason have the submit attribute set. 

Is there anyway to prevent this e.g. remove the submit attribute from the buttons?

[Mohan Kumar Ramasamy]

Hi  Michael , 

 

Sorry for the inconvenience caused.  

 

We have checked your reported query. We cannot able to change button type. We have logged an issue report for this, and we will include this fix in our upcoming patch release which will be scheduled on 30th December 2020 and appreciate your patience until then. You can track the status of this bug using below link.  

 

Link:  https://www.syncfusion.com/feedback/20636/post-action-occurred-when-click-rule-delete-button  

 

We would like you to suggest a workaround to change Button type using Created event. Please refer the below code snippets. 

 

 

@using Syncfusion.Blazor.QueryBuilder 

@inject IJSRuntime JSRuntime 

    <form> 

        <SfQueryBuilder TValue="EmployeeDetails" AllowValidation="true"> 

            <QueryBuilderEvents Created="Created" TValue="EmployeeDetails"></QueryBuilderEvents> 

            <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> 

        </SfQueryBuilder> 

    </form> 

 

    @code { 

 

        private async Task Created() 

        { 

            await this.JSRuntime.InvokeVoidAsync("changeType"); 

        } 

 

        

        private string[] Values = new string[] { "Mr.", "Mrs." }; 

        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; } 

        } 

 

    } 

 

_host.cshtml 

 

<script> 

        function changeType() { 

            var buttonEleColl = document.querySelectorAll(".e-query-builder .e-removerule.e-rule-delete"); 

            for (i = 0, len = buttonEleColl.length; i < len; i++) { 

                buttonEleColl[i].type = "button"; 

            } 

        } 

    </script> 

 

 

Regards, 

Mohan kumar R 

[Michael Aston]

Thanks

[Mohan Kumar Ramasamy]

Hi Michael ,  

  

Thanks for update. We will update further details as promised.  

  

Regards,  

Mohankumar R