Using the Same Operator Multiple Times with Different Templates

[Ecaldima]

I am currently using the QueryBuilder control in JavaScript ES5 with the NuGet package Syncfusion.EJ2.JavaScript version 27.2.5.

I would like to know if it is possible to use the same operator multiple times with different templates, such as:

operators: [

    { key: 'period', value: 'between' },

    { key: 'Between', value: 'between' }

]

The goal is to change the selector (template) dynamically based on the operator. Below is the custom template implementation I am working with:

template = {

    create: (args) => {

        return $("<div></div>")[0];

    },

    destroy: (args) => {

        try {

            $(args.elements).find("input")[0].ej2_instances[0].destroy();

            $(args.elements).remove();

        } catch (e) { }

    },

    write: (args) => {

        try {

            $("#" + args.elements.id).parent().css('width', '300px');

            let input = $("<input type='text' id='" + args.elements.id + "_" + args.operator + "' />");

            $(args.elements).append(input);

            if (args.operator === "period") {

                let dropDownList = new ej.dropdowns.DropDownList({

                    dataSource: ['Today', 'Yesterday', 'This week', ....],

                    change: function (ddlrargs) {

                        switch (ddlrargs.value) {

                            case 'Today':

                                queryBuilder.notifyChange(['todo calculate value', 'todo calculate value'], args.elements);

                                break;

                            // Additional cases here...

                        }

                    }

                });

                dropDownList.appendTo('#' + input[0].id);

            }

            if (args.operator === "between") {

                let daterangepicker = new ej.calendars.DateRangePicker({

                    width: '300px',

                    change: function (dtrargs) {

                        queryBuilder.notifyChange([dtrargs.startDate, dtrargs.endDate], args.elements);

                    },

                    value: (args.value ? args.value : null),

                });

                daterangepicker.appendTo('#' + input[0].id);

            }

        } catch (e) { }

    }

}

Is there a supported way to achieve this behavior? Specifically, can I configure the QueryBuilder to handle the same operator  twice and switch templates based on the key field?

Thank you for your assistance.

[YuvanShankar Arunagiri]

Hi Ecaldima,

We have validated your reported query and based on the dropdown list (filed and operator element of query builder) architecture, we cannot set the same value twice for the operator for specific columns of the query builder. It is the behavior of dropdown components. But we have prepared the custom sample to achieve your requirement.

Initially, we have set the operator with custom names, and while rendering the query builder, we can dynamically change the operator rule value using the getRule method of the query builder. Refer to the below code snippet and sample link.

write: function (args) {

            if (args.operator === 'period') {

                var ds = ['Today', 'Yesterday', 'This week',];

                dropDownObj = new ej.dropdowns.DropDownList({

                    dataSource: ds,

                    value: args.values ? args.values : null,

                    change: function (e) {

                        qryBldrObj.notifyChange(['todo calculate value', 'todo calculate value'], e.element);

                    }

                });

                dropDownObj.appendTo('#' + args.elements.id);

                setTimeout(function() {

                    var rule = qryBldrObj.getRule(args.elements);

                    rule.operator = 'between';

                }, 100);

            } else {

                let daterangepicker = new ej.calendars.DateRangePicker({

                    width: '300px',

                    change: function (dtrargs) {

                        var dateValues = [dtrargs.startDate.toString(), dtrargs.endDate.toString()];

                        qryBldrObj.notifyChange(dateValues, args.elements);

                    },

                    value: (args.value ? args.value : null),

                });

                daterangepicker.appendTo('#' + args.elements.id);

            }

        }

Sample link: https://stackblitz.com/edit/cxdire8e?file=index.js

Please let us know if you need any further assistance on this.

Regards,

YuvanShankar A