Query builder Action begin not working, as well as other errors.

[David House]

I want to use the query builder with no columns and no data, then later add it asynchronously, and this was working, however I have a few major issues, seemingly binding action begin simply does nothing, and when you create a new condition, and select the dropdown it looks like this:


Which is exactly what I want, however if I click the select a field window again, or off this error occurs:

helpers.ts:102 Uncaught TypeError: Cannot read properties of undefined (reading 'type')

    at t.fieldChangeSuccess (ej2.min.js:10:14249811)

    at e.<anonymous> (ej2.min.js:10:14248883)

    at e.notify (ej2.min.js:10:731811)

    at t.e.trigger (ej2.min.js:10:760915)

    at t.changeFilter (ej2.min.js:10:14248844)

    at t.changeRule (ej2.min.js:10:14248359)

    at t.changeField (ej2.min.js:10:14247872)

    at t.fieldClose (ej2.min.js:10:14246881)

    at e.notify (ej2.min.js:10:731997)

    at t.e.trigger (ej2.min.js:10:760915)

    at t.closePopup (ej2.min.js:10:5360250)

    at t.hidePopup (ej2.min.js:10:5373238)

    at t.onDocumentClick (ej2.min.js:10:5330988)

    at HTMLDocument.sentryWrapped (helpers.ts:77:19)

And the dropdown window now stays permanently until refresh.

The primary concern I have here is being unable to use action begin, I need it to work in a custom template to the query builder, and I cannot progress without it, however the dropdown menu bug is repeatable with my code and is something that my clients are likely to see.

Here is my code as it stands:
Implementation:

<div>

    @Html.EJS().QueryBuilder("cm-editorQueryBuilder").Change("CommEditorController.OnQueryBuilderChanged").EnableNotCondition(true).ActionBegin("actionBegin").Render()

</div>

At the bottom of the page I have the actionBegin script (Mind you right now this is just pulled directly from your documentation, with a console.log added, which is never called):

<script>

    function actionBegin(args) {

        console.log("Test")

        debugger

        var queryBldrObj = ej.base.getComponent(document.getElementById("querybuilder"), "query-builder");

        if (args.requestType === 'header-template-create') {

            var checkBoxObj = new ej.buttons.CheckBox({

                label: 'NOT',

                checked: args.notCondition,

                change: function (e) {

                    queryBldrObj.notifyChange(e.checked, e.event.target, 'not');

                }

            });

            checkBoxObj.appendTo('#' + args.ruleID + '_notoption');

            var ds = [{ 'key': 'AND', 'value': 'and' }, { 'key': 'OR', 'value': 'or' }];

            var btnObj = new ej.dropdowns.DropDownList({

                dataSource: ds,

                fields: { text: 'key', value: 'value' },

                value: args.condition,

                cssClass: 'e-custom-group-btn e-active-toggle',

                change: function (e) {

                    queryBldrObj.notifyChange(e.value, e.element, 'condition');

                }

            });

            btnObj.appendTo('#' + args.ruleID + '_cndtnbtn');

            var ddbitems = [

                { text: 'AddGroup', iconCss: 'e-icons e-add-icon e-addgroup' },

                { text: 'AddCondition', iconCss: 'e-icons e-add-icon e-addrule' }

            ];

            var addbtn = new ej.splitbuttons.DropDownButton({

                items: ddbitems,

                cssClass: 'e-round e-small e-caret-hide e-addrulegroup',

                iconCss: 'e-icons e-add-icon',

                select: function (event) {

                    var addbtn = ej.base.closest(event.element, '.e-dropdown-popup');

                    var ddb = addbtn.id.split('_');

                    if (event.item.text === 'AddGroup') {

                        queryBldrObj.addGroups([{ condition: 'and', 'rules': [{}], not: false }], ddb[1]);

                    }

                    else if (event.item.text === 'AddCondition') {

                        queryBldrObj.addRules([{}], ddb[1]);

                    }

                }

            });

            addbtn.appendTo('#' + args.ruleID + '_addbtn');

            var deleteGroupBtn = document.getElementById(args.ruleID).querySelector('.e-delete-btn');

            if (deleteGroupBtn) {

                deleteGroupBtn.onclick = function (e) {

                    queryBldrObj.deleteGroup(ej.base.closest(e.target.offsetParent, '.e-group-container'));

                }

            }

        }

    }

</script>

Cheers

[Sangeetha Priya Murugan]

Hi David, 

 

We have checked your reported issue and we need to validate more on this, so we will update you the further details on January 18^th, 2022. 

  

 

Regards, 

Sangeetha M 

[Sangeetha Priya Murugan]

 

Hi David, 

 

Based on our QueryBuilder behavior the operations such as, create or delete conditions and create or delete groups are performed based on the column definitions. The Field property of the Columns is necessary to map the data source values in the query builder columns.  

 

So, we suggest you to bind the columns or dataSource property as per our behavior. For more details, please refer the below link. 

 

https://ej2.syncfusion.com/aspnetmvc/documentation/query-builder/columns/#auto-generation 

 

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

 

Regards, 

Sangeetha M