getValidRules() not working properly

[pk]

Hi,

I'm using a queryBuilder declared on net core and applying validation and others from javascript.

(version 17.4.51, I had to update because of a patch for another component, it was working fine before)

<ejs-querybuilder id="myQuerybuilder" width="100%" created="onMyQBcreated" allowValidation="true">

                                        <e-querybuilder-columns>

[...]

I'm doing a validation, before using the queryBuilder's rule for my custom search:

function validateQueryBuilder() {

        var qb = getMyQueryBuilderInstance();

        ruleObj = qb.getValidRules(qb.rule);

        if (ruleObj.rules.length) { // rules comes undefined when there's only one condition in the component and I get "Cannot read property 'length' of undefined"

            $("#myQueryBuilderError").remove();

            return true;

        }

        else {

            $("#myQueryBuilderError").remove();

            $("#myQuerybuilder").parent().append($("<div id='myQueryBuilderError' class='invalid-feedback d-block'>Please add at least one condition</div>"))

            return false;

        }

    }

function getMyQueryBuilderInstance() {

        return ej.base.getInstance(document.getElementById("myQuerybuilder"), ej.querybuilder.QueryBuilder);

    }

And if the QueryBuilder has only one condition, I get this in ruleObj:

{label: undefined, field: undefined, operator: undefined, type: undefined, value: undefined}

I believe the issue is on the getRuleCollection() function, called by getValidRules()

this part specifically:

 (e.operator && (e.operator.indexOf("null") > -1 || e.operator.indexOf("empty") > -1) && (e.value = null),

            e = "" !== e.field && "" !== e.operator && "" !== e.value ? {

                label: e.label,

                field: e.field,

                operator: e.operator,

                type: e.type,

                value: e.value

            } : {})

Could you please identify the error and fix it, or guide me on how to solve it? 

thanks

[pk]

Only after adding another condition and selecting "or", it works.

And then I can remove the other condition and keeps on working.

This information might help you.

[Saranya Dhayalan]

Hi Pablo, 

 

Thank you for contacting Syncfusion support 

 

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

 

<div class="col-lg-12 control-section"> 

    <ejs-querybuilder id="myQuerybuilder" width="100%" allowValidation="true"> 

        <e-querybuilder-columns> 

            <e-querybuilder-column field="EmployeeID" label="Employee ID" type="number"></e-querybuilder-column> 

            <e-querybuilder-column field="FirstName" label="First Name" type="string"></e-querybuilder-column> 

            <e-querybuilder-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" values="ViewBag.values"></e-querybuilder-column> 

            <e-querybuilder-column field="Title" label="Title" type="string"></e-querybuilder-column> 

            <e-querybuilder-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-querybuilder-column> 

            <e-querybuilder-column field="Country" label="Country" type="string"></e-querybuilder-column> 

            <e-querybuilder-column field="City" label="City" type="string"></e-querybuilder-column> 

        </e-querybuilder-columns> 

    </ejs-querybuilder> 

</div> 

 

<ejs-button id="getrule" cssClass='e-primary' content="Get rule"></ejs-button> 

 

<script> 

    document.getElementById('getrule').onclick = function () { 

        var qb = getMyQueryBuilderInstance(); 

        ruleObj = qb.getValidRules(qb.rule); 

        if (ruleObj.rules.length) { // rules comes undefined when there's only one condition in the component and I get "Cannot read property 'length' of undefined" 

            $("#myQueryBuilderError").remove(); 

            return true; 

        } 

        else { 

            $("#myQueryBuilderError").remove(); 

            $("#myQuerybuilder").parent().append($("<div id='myQueryBuilderError' class='invalid-feedback d-block'>Please add at least one condition</div>")) 

            return false; 

        } 

    } 

    

    function getMyQueryBuilderInstance() { 

        return ej.base.getInstance(document.getElementById("myQuerybuilder"), ej.querybuilder.QueryBuilder); 

    } 

 

</script> 

 

Please find the below screenshot: 

 

 

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

 

Sample link: https://www.syncfusion.com/downloads/support/forum/152584/ze/EssentialJS2WebApplication5336924413 

 

we would like to know the following details. 

 

1.       Please replicate your reported issue in the above sample  

2.       Please share us the video demonstration of this issue. 

 

 

Could you please check the above sample & details and get back to us, if you need any further assistance on this. 

 

Regards, 

Saranya D