@syncfusion/ej2-querybuilder 30.1.42 → 30.2.4

package/src/query-builder/query-builder.js

@@ -233,37 +233,71 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.reset = function () {
         this.isImportRules = false;
         var bodyElem = this.element.querySelector('.e-group-body');
-        var inputElement = this.element.querySelectorAll('input.e-control');
-        for (var i = 0, len = inputElement.length; i < len; i++) {
-            if (inputElement[i].className.indexOf('e-tooltip') > -1) {
-                getComponent(inputElement[i], 'tooltip').destroy();
+        var inputElements = this.element.querySelectorAll('input.e-control');
+        var batchSize = 20;
+        var currentIndex = 0;
+        var processBatch = function () {
+            var endIndex = Math.min(currentIndex + batchSize, inputElements.length);
+            for (var i = currentIndex; i < endIndex; i++) {
+                var element = inputElements[i];
+                try {
+                    if (element.className.indexOf('e-tooltip') > -1) {
+                        var tooltip = getComponent(element, 'tooltip');
+                        if (tooltip) {
+                            tooltip.destroy();
+                        }
+                    }
+                    else if (element.parentElement && element.parentElement.className.indexOf('e-tooltip') > -1) {
+                        var tooltip = getComponent(element.parentElement, 'tooltip');
+                        if (tooltip) {
+                            tooltip.destroy();
+                        }
+                    }
+                }
+                catch (e) {
+                    console.warn('Error destroying tooltip:', e);
+                }
             }
-            else if (inputElement[i].parentElement.className.indexOf('e-tooltip') > -1) {
-                getComponent(inputElement[i].parentElement, 'tooltip').destroy();
+            currentIndex = endIndex;
+            if (currentIndex < inputElements.length) {
+                requestAnimationFrame(processBatch);
             }
+        };
+        if (inputElements.length > 0) {
+            processBatch();
         }
         if (bodyElem) {
-            bodyElem.innerHTML = '';
+            bodyElem.textContent = '';
         }
         else {
+            var fragment = document.createDocumentFragment();
             var grpContainer = this.createElement('div', { attrs: { class: 'e-group-container' } });
             var grpHeader = this.createElement('div', { attrs: { class: 'e-group-header' } });
             var grpBody = this.createElement('div', { attrs: { class: 'e-group-body' } });
-            grpContainer.appendChild(grpHeader).appendChild(grpBody);
-            this.element.appendChild(grpContainer);
+            grpContainer.appendChild(grpHeader);
+            grpContainer.appendChild(grpBody);
+            fragment.appendChild(grpContainer);
+            this.element.appendChild(fragment);
             bodyElem = this.element.querySelector('.e-group-body');
         }
         if (this.headerTemplate && this.isRoot) {
-            this.element.innerHTML = '';
+            this.element.textContent = '';
             this.isRoot = false;
         }
         if (this.enableNotCondition) {
-            removeClass(this.element.querySelectorAll('.e-qb-toggle'), 'e-active-toggle');
+            var toggleElements = this.element.querySelectorAll('.e-qb-toggle');
+            for (var i = 0; i < toggleElements.length; i++) {
+                removeClass([toggleElements[i]], 'e-active-toggle');
+            }
+        }
+        if (bodyElem) {
+            bodyElem.appendChild(this.createElement('div', { attrs: { class: 'e-rule-list' } }));
         }
-        bodyElem.appendChild(this.createElement('div', { attrs: { class: 'e-rule-list' } }));
         this.levelColl[this.element.id + '_group0'] = [0];
         this.setProperties({ rule: { condition: 'and', not: false, rules: [] } }, true);
-        this.disableRuleCondition(bodyElem.parentElement);
+        if (bodyElem && bodyElem.parentElement) {
+            this.disableRuleCondition(bodyElem.parentElement);
+        }
     };
     QueryBuilder.prototype.getWrapper = function () {
         return this.element;
@@ -286,100 +320,131 @@ var QueryBuilder = /** @class */ (function (_super) {
         return '';
     };
     QueryBuilder.prototype.initialize = function () {
+        var _this = this;
         if (this.dataColl.length) {
-            var columnKeys = Object.keys(this.dataColl[0]);
+            var columnKeys_1 = Object.keys(this.dataColl[0]);
             var cols = [];
-            var categories = [];
-            var type = void 0;
-            var groupBy = false;
-            var isDate = false;
-            var value = void 0;
-            var validateObj = { isRequired: true, min: 0, max: Number.MAX_VALUE };
+            var categories_1 = [];
+            var type_1;
+            var groupBy_1 = false;
+            var isDate_1 = false;
+            var value_1;
+            var validateObj_1 = { isRequired: true, min: 0, max: Number.MAX_VALUE };
             if (this.columns.length) {
                 this.columnSort();
                 var columns = this.columns;
-                for (var i = 0, len = columns.length; i < len; i++) {
-                    this.updateCustomOperator(columns[i], 'initial');
-                    if (!columns[i].type) {
-                        if (columnKeys.indexOf(columns[i].field) > -1) {
-                            value = this.dataColl[0][columns[i].field];
-                            type = typeof value;
-                            if (type === 'string') {
-                                isDate = !isNaN(Date.parse(value));
+                columns.forEach(function (column) {
+                    _this.updateCustomOperator(column, 'initial');
+                    if (!column.type) {
+                        if (columnKeys_1.indexOf(column.field) > -1) {
+                            value_1 = _this.dataColl[0][column.field];
+                            type_1 = typeof value_1;
+                            if (type_1 === 'string') {
+                                isDate_1 = !isNaN(Date.parse(value_1));
                             }
-                            else if (type === 'object') {
-                                isDate = value instanceof Date && !isNaN(value.getTime());
-                                type = 'string';
+                            else if (type_1 === 'object') {
+                                isDate_1 = value_1 instanceof Date && !isNaN(value_1.getTime());
+                                type_1 = 'string';
                             }
-                            columns[i].type = type;
-                            isDate = false;
+                            column.type = type_1;
+                            isDate_1 = false;
                         }
-                        type = 'string';
+                        type_1 = 'string';
                     }
-                    if (!columns[i].validation) {
-                        columns[i].validation = validateObj;
+                    if (!column.validation) {
+                        column.validation = validateObj_1;
                     }
-                    if (columns[i].category) {
-                        groupBy = true;
+                    if (column.category) {
+                        groupBy_1 = true;
                     }
                     else {
-                        columns[i].category = this.l10n.getConstant('OtherFields');
+                        column.category = _this.l10n.getConstant('OtherFields');
                     }
-                    if (categories.indexOf(columns[i].category) < 0) {
-                        categories.push(columns[i].category);
+                    if (categories_1.indexOf(column.category) < 0) {
+                        categories_1.push(column.category);
                     }
-                    if (!columns[i].operators ||
-                        (this.isLocale && this.isCustomOprCols.indexOf(columns[i].field) === -1)) {
-                        columns[i].operators = this.customOperators[columns[i].type + 'Operator'];
+                    if (!column.operators ||
+                        (_this.isLocale && _this.isCustomOprCols.indexOf(column.field) === -1)) {
+                        column.operators = _this.customOperators[column.type + 'Operator'];
                     }
-                }
-                if (groupBy && (categories.length > 1 || categories[0] !== this.l10n.getConstant('OtherFields'))) {
+                });
+                if (groupBy_1 && (categories_1.length > 1 || categories_1[0] !== this.l10n.getConstant('OtherFields'))) {
                     this.fields = { text: 'label', value: 'field', groupBy: 'category' };
                 }
                 this.updateSubFieldsFromColumns(this.columns);
             }
             else {
-                for (var i = 0, len = columnKeys.length; i < len; i++) {
-                    value = this.dataColl[0][columnKeys[i]];
-                    type = typeof value;
-                    if (type === 'string') {
-                        isDate = !isNaN(Date.parse(value));
-                    }
-                    else if (type === 'object' && !Object.keys(value).length) {
-                        isDate = value instanceof Date && !isNaN(value.getTime());
-                        type = 'string';
-                    }
-                    cols[i] = { 'field': columnKeys[i], 'label': columnKeys[i], 'type': isDate ? 'date' : type,
-                        'validation': validateObj };
-                    isDate = false;
+                for (var i = 0, len = columnKeys_1.length; i < len; i++) {
+                    value_1 = this.dataColl[0][columnKeys_1[i]];
+                    type_1 = typeof value_1;
+                    if (type_1 === 'string') {
+                        isDate_1 = !isNaN(Date.parse(value_1));
+                    }
+                    else if (type_1 === 'object' && !Object.keys(value_1).length) {
+                        isDate_1 = value_1 instanceof Date && !isNaN(value_1.getTime());
+                        type_1 = 'string';
+                    }
+                    cols[i] = {
+                        'field': columnKeys_1[i], 'label': columnKeys_1[i], 'type': isDate_1 ? 'date' : type_1,
+                        'validation': validateObj_1
+                    };
+                    isDate_1 = false;
                     cols[i].operators = this.customOperators[cols[i].type + 'Operator'];
-                    if (type === 'object') {
-                        this.updateSubFields(value, cols[i]);
+                    if (type_1 === 'object') {
+                        this.updateSubFields(value_1, cols[i]);
                     }
                 }
                 this.columns = cols;
             }
         }
         else if (this.columns && this.columns.length) {
-            var columns = this.columns;
-            for (var i = 0, len = columns.length; i < len; i++) {
-                if (columns[i].category && columns[i].category !== this.l10n.getConstant('OtherFields')) {
-                    this.fields = { text: 'label', value: 'field', groupBy: 'category' };
+            if (this.sortDirection !== 'Default') {
+                this.columnSort();
+            }
+            this.processColumnsInBatches();
+            if (this.columns.length > 50) {
+                setTimeout(function () {
+                    _this.updateSubFieldsFromColumns(_this.columns);
+                }, 0);
+            }
+            else {
+                this.updateSubFieldsFromColumns(this.columns);
+            }
+        }
+        this.trigger('dataBound', { type: 'dataBound' });
+    };
+    QueryBuilder.prototype.processColumnsInBatches = function () {
+        var _this = this;
+        var columns = this.columns;
+        var batchSize = 10;
+        var processedCount = 0;
+        var processBatch = function () {
+            var endIdx = Math.min(processedCount + batchSize, columns.length);
+            for (var i = processedCount; i < endIdx; i++) {
+                if (columns[i].category && columns[i].category !== _this.l10n.getConstant('OtherFields')) {
+                    _this.fields = { text: 'label', value: 'field', groupBy: 'category' };
                 }
                 else {
-                    columns[i].category = this.l10n.getConstant('OtherFields');
+                    columns[i].category = _this.l10n.getConstant('OtherFields');
                 }
-                this.updateCustomOperator(columns[i], 'initial');
+                _this.updateCustomOperator(columns[i], 'initial');
                 if (!columns[i].operators ||
-                    (this.isLocale && this.isCustomOprCols.indexOf(columns[i].field) === -1)) {
-                    columns[i].operators = this.customOperators[columns[i].type + 'Operator'];
+                    (_this.isLocale && _this.isCustomOprCols.indexOf(columns[i].field) === -1)) {
+                    columns[i].operators = _this.customOperators[columns[i].type + 'Operator'];
                 }
             }
-            this.updateSubFieldsFromColumns(this.columns);
-        }
-        this.trigger('dataBound', { type: 'dataBound' });
+            processedCount = endIdx;
+            if (processedCount < columns.length) {
+                requestAnimationFrame(processBatch);
+            }
+        };
+        processBatch();
     };
     QueryBuilder.prototype.updateSubFieldsFromColumns = function (col, field) {
+        if (col.length > 50) {
+            this.updateSubFieldsLarge(col, field);
+            return;
+        }
         for (var i = 0; i < col.length; i++) {
             if (this.separator !== '' && col[i].field.indexOf(this.separator) < 0) {
                 col[i].field = field ? field + this.separator + col[i].field : col[i].field;
@@ -396,6 +461,39 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
         }
     };
+    QueryBuilder.prototype.updateSubFieldsLarge = function (col, field) {
+        var _this = this;
+        var i = 0;
+        var colLength = col.length;
+        var processNextBatch = function () {
+            var endIdx = Math.min(i + 10, colLength);
+            for (; i < endIdx; i++) {
+                if (_this.separator !== '' && col[i].field.indexOf(_this.separator) < 0) {
+                    col[i].field = field ? field + _this.separator + col[i].field : col[i].field;
+                }
+                if (col[i].operators) {
+                    _this.updateCustomOperator(col[i]);
+                }
+                else if (col[i].type && col[i].type !== 'object') {
+                    col[i].operators = _this.customOperators[col[i].type + 'Operator'];
+                }
+            }
+            if (i < colLength) {
+                requestAnimationFrame(processNextBatch);
+            }
+            else {
+                setTimeout(function () {
+                    for (var j = 0; j < colLength; j++) {
+                        if (col[j].columns) {
+                            col[j].type = 'object';
+                            _this.updateSubFieldsFromColumns(col[j].columns, col[j].field);
+                        }
+                    }
+                }, 0);
+            }
+        };
+        processNextBatch();
+    };
     QueryBuilder.prototype.updateSubFields = function (value, col, data) {
         var sampCol;
         col.columns = [];
@@ -565,8 +663,10 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
                 args = { groupID: groupID, cancel: false, type: 'condition', value: targetValue.toLowerCase() };
                 if (this.enableNotCondition) {
-                    args = { groupID: groupID, cancel: false, type: 'condition', value: targetValue.toLowerCase(),
-                        'not': ariaChecked };
+                    args = {
+                        groupID: groupID, cancel: false, type: 'condition', value: targetValue.toLowerCase(),
+                        'not': ariaChecked
+                    };
                 }
             }
             if (!this.isImportRules) {
@@ -664,7 +764,7 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.appendRuleElem = function (target, column, type, parentId, action, rule) {
         var ruleElem;
         var elem;
-        var ruleListElem = target.querySelector('.e-rule-list');
+        var ruleListElem = target && target.querySelector('.e-rule-list');
         var args;
         if (type === 'change') {
             ruleElem = select('#' + parentId, target);
@@ -791,7 +891,9 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
     };
     QueryBuilder.prototype.addRuleSuccessCallBack = function (args, trgt, rule, col, act, pId, isRlTmp) {
-        var height = (this.element.className.indexOf('e-device') > -1) ? '250px' : '200px';
+        var _this = this;
+        var isVertical = this.element.className.indexOf('e-device') > -1 || this.displayMode === 'Vertical';
+        var height = isVertical ? '250px' : '200px';
         var ruleID;
         var column = (rule && rule.field) ? this.getColumn(rule.field) : col ? col : this.columns[0];
         var operators;
@@ -799,15 +901,26 @@ var QueryBuilder = /** @class */ (function (_super) {
         var ruleElem;
         var newRule = { 'label': '', 'field': '', 'type': '', 'operator': '' };
         if (!args.cancel) {
+            var fragment = document.createDocumentFragment();
             if (column && column.ruleTemplate && rule.field) {
                 this.selectedColumn = column;
                 operators = this.selectedColumn.operators;
-                newRule = { 'label': column.label, 'field': column.field, 'type': column.type, 'operator': operators[0].value };
+                newRule = {
+                    'label': column.label,
+                    'field': column.field,
+                    'type': column.type,
+                    'operator': operators[0].value
+                };
                 var passedRule = Object.keys(rule).length ? rule : newRule;
                 ruleElem = this.appendRuleElem(trgt, column, act, pId, 'field', passedRule);
-                var args_1 = { requestType: 'template-create', action: 'insert-rule', ruleID: ruleElem.id,
-                    fields: this.fields, rule: passedRule };
-                this.trigger('actionBegin', args_1);
+                var actionArgs = {
+                    requestType: 'template-initialize',
+                    ruleID: ruleElem.id,
+                    action: 'insert-rule',
+                    fields: this.fields,
+                    rule: passedRule
+                };
+                this.trigger('actionBegin', actionArgs);
             }
             else {
                 ruleElem = this.appendRuleElem(trgt, column, act, pId, 'field');
@@ -822,139 +935,30 @@ var QueryBuilder = /** @class */ (function (_super) {
                     addClass([element], 'e-round');
                     addClass([element], 'e-icon-btn');
                     element.setAttribute('title', this.l10n.getConstant('DeleteRule'));
-                    var spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-delete-icon' } });
-                    ruleElem.querySelector('.e-rule-delete').appendChild(spanElement);
+                    var spanElement = this.createElement('span', {
+                        attrs: { class: 'e-btn-icon e-icons e-delete-icon' }
+                    });
+                    element.appendChild(spanElement);
                 }
                 if (!this.showButtons.ruleDelete) {
                     element.classList.add('e-button-hide');
                 }
             }
-            if (this.displayMode === 'Vertical' || this.element.className.indexOf('e-device') > -1) {
-                ruleElem.className = 'e-rule-container e-vertical-mode';
-            }
-            else {
-                ruleElem.className = 'e-rule-container e-horizontal-mode';
-            }
+            ruleElem.className = 'e-rule-container ' + (isVertical ? 'e-vertical-mode' : 'e-horizontal-mode');
             var previousRuleElem = ruleElem.previousElementSibling;
-            if (this.enableSeparateConnector) {
-                var prevRule = void 0;
-                var ruleContainer = void 0;
-                if (previousRuleElem && previousRuleElem.classList.contains('e-group-container')) {
-                    ruleContainer = previousRuleElem.querySelectorAll('.e-rule-container');
-                    previousRuleElem = ruleContainer[ruleContainer.length - 1];
-                }
-                if (previousRuleElem && previousRuleElem.classList.contains('e-rule-container')) {
-                    prevRule = this.getRule(previousRuleElem);
-                }
-                if (this.headerTemplate && previousRuleElem && prevRule) {
-                    this.headerTemplateFn(previousRuleElem, false, prevRule.condition, prevRule, previousRuleElem.id);
-                }
-                else if (isNullOrUndefined(previousRuleElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
-                    var group = ruleElem.closest('.e-group-container');
-                    if (group && group.previousElementSibling) {
-                        var prevElem = group.previousElementSibling;
-                        var prevRuleContainer = prevElem.querySelectorAll('.e-rule-container');
-                        if (prevElem.classList.contains('e-group-container')) {
-                            prevElem = prevRuleContainer[prevRuleContainer.length - 1];
-                        }
-                        if (prevElem.classList.contains('e-rule-container')) {
-                            var prevRule_1 = this.getRule(prevElem);
-                            this.headerTemplateFn(prevElem, false, prevRule_1.condition, prevRule_1, prevElem.id, true);
-                        }
-                    }
-                    else {
-                        this.headerTemplateFn(ruleElem, false, rule.condition, rule, ruleElem.id, true);
-                    }
-                }
-            }
-            else {
-                if (previousRuleElem && previousRuleElem.className.indexOf('e-rule-container') > -1) {
-                    if (ruleElem.className.indexOf('e-joined-rule') < 0) {
-                        ruleElem.className += ' e-joined-rule';
-                    }
-                    if (previousRuleElem.className.indexOf('e-prev-joined-rule') < 0) {
-                        previousRuleElem.className += ' e-prev-joined-rule';
-                    }
-                }
-            }
-            if (previousRuleElem && previousRuleElem.className.indexOf('e-group-container') > -1 &&
-                ruleElem.className.indexOf('e-separate-rule') < 0) {
-                ruleElem.className += ' e-separate-rule';
-            }
+            this.processAdjacentElements(ruleElem, previousRuleElem, rule);
             if (!this.isImportRules) {
                 this.updateAddedRule(trgt, rule, newRule, isRlTmp, pId, this.enableSeparateConnector ? true : null);
             }
+            var ruleCount = this.rule.rules.length;
             if (!column || (column && !column.ruleTemplate) || !rule.field) {
-                if (this.fieldMode === 'Default') {
-                    var ddlField = void 0;
-                    var ddlValue = void 0;
-                    if (this.separator && rule.field) {
-                        ddlValue = this.GetRootColumnName(rule.field);
-                    }
-                    else if (this.autoSelectField) {
-                        ddlValue = this.GetRootColumnName(rule.field);
-                    }
-                    else {
-                        ddlValue = this.isImportRules ? this.GetRootColumnName(rule.field) : rule.field;
-                    }
-                    ddlField = {
-                        dataSource: this.columns,
-                        fields: this.fields, placeholder: this.l10n.getConstant('SelectField'),
-                        popupHeight: ((this.columns.length > 5) ? height : 'auto'), close: this.fieldClose.bind(this, ruleElem.id + '_filterkey'),
-                        change: this.changeField.bind(this), value: rule ? ddlValue : null, open: this.popupOpen.bind(this, true), cssClass: 'qb-dropdownlist'
-                    };
-                    if (this.fieldModel) {
-                        ddlField = __assign({}, ddlField, this.fieldModel);
-                    }
-                    dropDownList = new DropDownList(ddlField);
-                    dropDownList.appendTo('#' + ruleElem.id + '_filterkey');
-                    var ddlVal = void 0;
-                    if (this.separator && rule.field) {
-                        ddlVal = this.GetRootColumnName(rule.field);
-                    }
-                    else {
-                        ddlVal = this.isImportRules ? this.GetRootColumnName(rule.field) :
-                            dropDownList.value;
-                    }
-                    this.selectedColumn = dropDownList.getDataByValue(ddlVal);
-                    if (Object.keys(rule).length) {
-                        this.changeRule(rule, {
-                            element: dropDownList.element, itemData: this.selectedColumn
-                        });
-                    }
+                if (ruleCount > 20) {
+                    setTimeout(function () {
+                        _this.applyFieldComponent(ruleElem, rule, height);
+                    }, 0);
                 }
                 else {
-                    var ddlField = void 0;
-                    var ddlValue = this.isImportRules ? rule.field : rule.field;
-                    this.dummyDropdownTreeDs = extend([], this.columns, [], true);
-                    this.updateDropdowntreeDS(this.dummyDropdownTreeDs);
-                    ddlField = {
-                        fields: { dataSource: this.dummyDropdownTreeDs,
-                            value: 'field', text: 'label', child: 'columns', expanded: 'expanded', selectable: 'selectable' },
-                        placeholder: this.l10n.getConstant('SelectField'), showClearButton: false,
-                        popupHeight: ((this.columns.length > 5) ? height : 'auto'), changeOnBlur: false,
-                        change: this.changeField.bind(this), value: !isNullOrUndefined(ddlValue) ? [ddlValue] : null,
-                        open: this.popupOpen.bind(this, false), treeSettings: { expandOn: 'Click' },
-                        cssClass: 'e-qb-ddt', filtering: this.dropdownTreeFiltering.bind(this), close: this.dropdownTreeClose.bind(this)
-                    };
-                    if (this.fieldModel) {
-                        ddlField = __assign({}, ddlField, this.fieldModel);
-                    }
-                    var dropdowntree = new DropDownTree(ddlField);
-                    dropdowntree.appendTo('#' + ruleElem.id + '_filterkey');
-                    if (!isNullOrUndefined(dropdowntree.value)) {
-                        var value = this.getLabelFromColumn(dropdowntree.value[0]);
-                        dropdowntree.element.value = value;
-                    }
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    var ddlVal = !isNullOrUndefined(rule.field) ?
-                        this.GetRootColumnName(rule.field) : dropdowntree.value;
-                    this.selectedColumn = this.getColumn(ddlVal);
-                    if (Object.keys(rule).length) {
-                        this.changeRule(rule, {
-                            element: dropdowntree.element, itemData: this.selectedColumn
-                        });
-                    }
+                    this.applyFieldComponent(ruleElem, rule, height);
                 }
             }
             ruleID = ruleElem.id.replace(this.element.id + '_', '');
@@ -963,46 +967,204 @@ var QueryBuilder = /** @class */ (function (_super) {
                 this.ruleLock(lockRuleTarget);
             }
             if (!this.isImportRules && !this.prvtEvtTgrDaD) {
-                this.trigger('change', { groupID: trgt.id.replace(this.element.id + '_', ''), ruleID: ruleID, type: 'insertRule' });
+                this.trigger('change', {
+                    groupID: trgt.id.replace(this.element.id + '_', ''),
+                    ruleID: ruleID,
+                    type: 'insertRule'
+                });
             }
         }
         if (this.enableSeparateConnector && isNullOrUndefined(rule.condition) && ruleID) {
             rule = this.getRule(ruleID);
         }
         if (this.enableSeparateConnector) {
-            var prevElem = ruleElem.previousElementSibling;
-            var ruleContainer = void 0;
-            while (prevElem && !prevElem.classList.contains('e-rule-container')) {
-                if (prevElem.classList.contains('e-group-container')) {
-                    ruleContainer = prevElem.querySelectorAll('.e-rule-container');
-                    prevElem = ruleContainer[ruleContainer.length - 1];
-                    break;
+            this.processConnectorElements(ruleElem);
+        }
+    };
+    QueryBuilder.prototype.processAdjacentElements = function (ruleElem, previousRuleElem, rule) {
+        if (this.enableSeparateConnector) {
+            if (previousRuleElem && previousRuleElem.classList.contains('e-group-container')) {
+                var ruleContainer = previousRuleElem.querySelectorAll('.e-rule-container');
+                previousRuleElem = ruleContainer[ruleContainer.length - 1];
+            }
+            if (previousRuleElem && previousRuleElem.classList.contains('e-rule-container')) {
+                var prevRule = this.getRule(previousRuleElem);
+                if (this.headerTemplate) {
+                    this.headerTemplateFn(previousRuleElem, false, prevRule.condition, prevRule, previousRuleElem.id);
                 }
-                prevElem = prevElem.previousElementSibling;
             }
-            if (this.headerTemplate && prevElem) {
+            else if (isNullOrUndefined(previousRuleElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
+                this.handleOrphanedRuleElement(ruleElem, rule);
+            }
+        }
+        else {
+            if (previousRuleElem && previousRuleElem.className.indexOf('e-rule-container') > -1) {
+                ruleElem.classList.add('e-joined-rule');
+                previousRuleElem.classList.add('e-prev-joined-rule');
+            }
+        }
+        if (previousRuleElem && previousRuleElem.className.indexOf('e-group-container') > -1 &&
+            ruleElem.className.indexOf('e-separate-rule') < 0) {
+            ruleElem.className += ' e-separate-rule';
+        }
+    };
+    QueryBuilder.prototype.handleOrphanedRuleElement = function (ruleElem, rule) {
+        var group = ruleElem.closest('.e-group-container');
+        if (group && group.previousElementSibling) {
+            var prevElem = group.previousElementSibling;
+            var prevRuleContainer = prevElem.querySelectorAll('.e-rule-container');
+            if (prevElem.classList.contains('e-group-container')) {
+                prevElem = prevRuleContainer[prevRuleContainer.length - 1];
+            }
+            if (prevElem.classList.contains('e-rule-container')) {
                 var prevRule = this.getRule(prevElem);
-                var args_2 = { requestType: 'rule-template-create', ruleID: prevElem.id, condition: prevRule.condition,
-                    notCondition: this.enableNotCondition ? true : undefined };
-                this.trigger('actionBegin', args_2);
+                this.headerTemplateFn(prevElem, false, prevRule.condition, prevRule, prevElem.id, true);
             }
-            else if (isNullOrUndefined(prevElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
-                var group = ruleElem.closest('.e-group-container');
-                if (group && group.previousElementSibling && group.previousElementSibling.previousElementSibling) {
-                    var prevElem_1 = group.previousElementSibling.previousElementSibling;
-                    if (prevElem_1.classList.contains('e-group-container')) {
-                        var ruleContainer_1 = prevElem_1.querySelectorAll('.e-rule-container');
-                        prevElem_1 = ruleContainer_1[ruleContainer_1.length - 1];
-                    }
-                    if (prevElem_1.classList.contains('e-rule-container')) {
-                        var prevRule = this.getRule(prevElem_1);
-                        var args_3 = { requestType: 'rule-template-create', ruleID: prevElem_1.id,
-                            condition: prevRule.condition, notCondition: this.enableNotCondition ? true : undefined };
-                        this.trigger('actionBegin', args_3);
-                    }
-                }
+        }
+        else {
+            this.headerTemplateFn(ruleElem, false, rule.condition, rule, ruleElem.id, true);
+        }
+    };
+    QueryBuilder.prototype.processConnectorElements = function (ruleElem) {
+        var prevElem = ruleElem.previousElementSibling;
+        var ruleContainer;
+        while (prevElem && !prevElem.classList.contains('e-rule-container')) {
+            if (prevElem.classList.contains('e-group-container')) {
+                ruleContainer = prevElem.querySelectorAll('.e-rule-container');
+                prevElem = ruleContainer[ruleContainer.length - 1];
+                break;
             }
-            this.setMultiConnector(ruleElem);
+            prevElem = prevElem.previousElementSibling;
+        }
+        if (this.headerTemplate && prevElem) {
+            var prevRule = this.getRule(prevElem);
+            var args = {
+                requestType: 'rule-template-create',
+                ruleID: prevElem.id,
+                condition: prevRule.condition,
+                notCondition: this.enableNotCondition ? true : undefined
+            };
+            this.trigger('actionBegin', args);
+        }
+        else if (isNullOrUndefined(prevElem) && ruleElem.id !== this.element.id + '_group0_rule0') {
+            this.handleOrphanedConnectorElement(ruleElem);
+        }
+        this.setMultiConnector(ruleElem);
+    };
+    QueryBuilder.prototype.handleOrphanedConnectorElement = function (ruleElem) {
+        var group = ruleElem.closest('.e-group-container');
+        if (group && group.previousElementSibling && group.previousElementSibling.previousElementSibling) {
+            var prevElem = group.previousElementSibling.previousElementSibling;
+            if (prevElem.classList.contains('e-group-container')) {
+                var ruleContainer = prevElem.querySelectorAll('.e-rule-container');
+                prevElem = ruleContainer[ruleContainer.length - 1];
+            }
+            if (prevElem.classList.contains('e-rule-container')) {
+                var prevRule = this.getRule(prevElem);
+                var args = {
+                    requestType: 'rule-template-create',
+                    ruleID: prevElem.id,
+                    condition: prevRule.condition,
+                    notCondition: this.enableNotCondition ? true : undefined
+                };
+                this.trigger('actionBegin', args);
+            }
+        }
+    };
+    QueryBuilder.prototype.applyFieldComponent = function (ruleElem, rule, height) {
+        if (this.fieldMode === 'Default') {
+            this.applyDropdownListComponent(ruleElem, rule, height);
+        }
+        else {
+            this.applyDropdownTreeComponent(ruleElem, rule, height);
+        }
+    };
+    QueryBuilder.prototype.applyDropdownListComponent = function (ruleElem, rule, height) {
+        var ddlField;
+        var ddlValue;
+        if (this.separator && rule.field) {
+            ddlValue = this.GetRootColumnName(rule.field);
+        }
+        else if (this.autoSelectField) {
+            ddlValue = this.GetRootColumnName(rule.field);
+        }
+        else {
+            ddlValue = this.isImportRules ? this.GetRootColumnName(rule.field) : rule.field;
+        }
+        ddlField = {
+            dataSource: this.columns,
+            fields: this.fields,
+            placeholder: this.l10n.getConstant('SelectField'),
+            popupHeight: ((this.columns.length > 5) ? height : 'auto'),
+            close: this.fieldClose.bind(this, ruleElem.id + '_filterkey'),
+            change: this.changeField.bind(this),
+            value: rule ? ddlValue : null,
+            open: this.popupOpen.bind(this, true),
+            cssClass: 'qb-dropdownlist'
+        };
+        if (this.fieldModel) {
+            ddlField = __assign({}, ddlField, this.fieldModel);
+        }
+        var dropDownList = new DropDownList(ddlField);
+        dropDownList.appendTo('#' + ruleElem.id + '_filterkey');
+        var ddlVal;
+        if (this.separator && rule.field) {
+            ddlVal = this.GetRootColumnName(rule.field);
+        }
+        else {
+            ddlVal = this.isImportRules ? this.GetRootColumnName(rule.field) : dropDownList.value;
+        }
+        this.selectedColumn = dropDownList.getDataByValue(ddlVal);
+        if (Object.keys(rule).length) {
+            this.changeRule(rule, {
+                element: dropDownList.element,
+                itemData: this.selectedColumn
+            });
+        }
+    };
+    QueryBuilder.prototype.applyDropdownTreeComponent = function (ruleElem, rule, height) {
+        var ddlField;
+        var ddlValue = this.isImportRules ? rule.field : rule.field;
+        this.dummyDropdownTreeDs = extend([], this.columns, [], true);
+        this.updateDropdowntreeDS(this.dummyDropdownTreeDs);
+        ddlField = {
+            fields: {
+                dataSource: this.dummyDropdownTreeDs,
+                value: 'field',
+                text: 'label',
+                child: 'columns',
+                expanded: 'expanded',
+                selectable: 'selectable'
+            },
+            placeholder: this.l10n.getConstant('SelectField'),
+            showClearButton: false,
+            popupHeight: ((this.columns.length > 5) ? height : 'auto'),
+            changeOnBlur: false,
+            change: this.changeField.bind(this),
+            value: !isNullOrUndefined(ddlValue) ? [ddlValue] : null,
+            open: this.popupOpen.bind(this, false),
+            treeSettings: { expandOn: 'Click' },
+            cssClass: 'e-qb-ddt',
+            filtering: this.dropdownTreeFiltering.bind(this),
+            close: this.dropdownTreeClose.bind(this)
+        };
+        if (this.fieldModel) {
+            ddlField = __assign({}, ddlField, this.fieldModel);
+        }
+        var dropdowntree = new DropDownTree(ddlField);
+        dropdowntree.appendTo('#' + ruleElem.id + '_filterkey');
+        if (!isNullOrUndefined(dropdowntree.value)) {
+            var value = this.getLabelFromColumn(dropdowntree.value[0]);
+            dropdowntree.element.value = value;
+        }
+        var ddlVal = !isNullOrUndefined(rule.field) ?
+            this.GetRootColumnName(rule.field) : dropdowntree.value;
+        this.selectedColumn = this.getColumn(ddlVal);
+        if (Object.keys(rule).length) {
+            this.changeRule(rule, {
+                element: dropdowntree.element,
+                itemData: this.selectedColumn
+            });
         }
     };
     QueryBuilder.prototype.dropdownTreeFiltering = function (args) {
@@ -1017,7 +1179,6 @@ var QueryBuilder = /** @class */ (function (_super) {
         var ruleElem = document.getElementById(ruleElemID);
         this.ddTree = getComponent(ruleElem.querySelector('input.e-dropdowntree'), 'dropdowntree');
         var hierarchicalData = extend([], this.columns, [], true);
-        // Cancel the default filtering.
         args.cancel = true;
         if (args.text === '') {
             this.changeDataSource(hierarchicalData);
@@ -1177,7 +1338,8 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
     };
     QueryBuilder.prototype.renderToolTip = function (element) {
-        var tooltip = new Tooltip({ content: this.l10n.getConstant('ValidationMessage'), isSticky: true,
+        var tooltip = new Tooltip({
+            content: this.l10n.getConstant('ValidationMessage'), isSticky: true,
             position: 'BottomCenter', cssClass: 'e-querybuilder-error', afterClose: function () {
                 tooltip.destroy();
             }, beforeOpen: function (args) {
@@ -1185,7 +1347,8 @@ var QueryBuilder = /** @class */ (function (_super) {
                 if (tooltipCloseElement) {
                     tooltipCloseElement.style.display = 'none';
                 }
-            } });
+            }
+        });
         tooltip.appendTo(element);
         tooltip.open(element);
     };
@@ -1343,7 +1506,6 @@ var QueryBuilder = /** @class */ (function (_super) {
         groupElem.appendChild(groupHdrElem);
         grpBodyElem.appendChild(rulesElem);
         groupElem.appendChild(grpBodyElem);
-        // create button group in OR and AND process
         if (!this.headerTemplate) {
             if (this.allowDragAndDrop) {
                 dragClsName = 'e-icons e-drag-qb-rule';
@@ -1351,8 +1513,12 @@ var QueryBuilder = /** @class */ (function (_super) {
             else {
                 dragClsName = 'e-icons e-drag-qb-rule e-hidden';
             }
-            var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-label': 'drag handle',
-                    title: 'drag handle' } });
+            var spanDragElement = this.createElement('span', {
+                attrs: {
+                    class: dragClsName, 'aria-label': 'drag handle',
+                    title: 'drag handle'
+                }
+            });
             groupHdrElem.appendChild(spanDragElement);
             var className = this.enableSeparateConnector && !isConnector ? 'e-lib e-btn-group e-qb-toggle-btn' : 'e-lib e-btn-group';
             glueElem = this.createElement('div', { attrs: { class: className, role: 'group' } });
@@ -1370,13 +1536,17 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             inputElem = this.createElement('input', { attrs: { type: 'radio', class: 'e-btngroup-and', value: 'AND' } });
             glueElem.appendChild(inputElem);
-            labelElem = this.createElement('label', { attrs: { class: 'e-lib e-btn e-btngroup-and-lbl e-small' },
-                innerHTML: this.l10n.getConstant('AND') });
+            labelElem = this.createElement('label', {
+                attrs: { class: 'e-lib e-btn e-btngroup-and-lbl e-small' },
+                innerHTML: this.l10n.getConstant('AND')
+            });
             glueElem.appendChild(labelElem);
             inputElem = this.createElement('input', { attrs: { type: 'radio', class: 'e-btngroup-or', value: 'OR' } });
             glueElem.appendChild(inputElem);
-            labelElem = this.createElement('label', { attrs: { class: 'e-lib e-btn e-btngroup-or-lbl e-small' },
-                innerHTML: this.l10n.getConstant('OR') });
+            labelElem = this.createElement('label', {
+                attrs: { class: 'e-lib e-btn e-btngroup-or-lbl e-small' },
+                innerHTML: this.l10n.getConstant('OR')
+            });
             glueElem.appendChild(labelElem);
             groupHdrElem.appendChild(glueElem);
             grpActElem = this.createElement('div', { attrs: { class: 'e-group-action' } });
@@ -1409,8 +1579,12 @@ var QueryBuilder = /** @class */ (function (_super) {
         else {
             dragClsName = 'e-icons e-drag-qb-rule e-hidden';
         }
-        var spanDragElement = this.createElement('span', { attrs: { class: dragClsName, 'aria-label': 'drag handle',
-                title: 'drag handle' } });
+        var spanDragElement = this.createElement('span', {
+            attrs: {
+                class: dragClsName, 'aria-label': 'drag handle',
+                title: 'drag handle'
+            }
+        });
         fieldElem.appendChild(spanDragElement);
         var filterElem = this.createElement('input', { attrs: { type: 'text', class: 'e-filter-input' } });
         tempElem.appendChild(filterElem);
@@ -1691,9 +1865,11 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             this.updatedRule = null;
             if (this.headerTemplate) {
-                var args_4 = { requestType: 'header-template-create', ruleID: groupElem.id, condition: condition,
-                    notCondition: this.enableNotCondition ? not : undefined };
-                this.trigger('actionBegin', args_4);
+                var args_1 = {
+                    requestType: 'header-template-create', ruleID: groupElem.id, condition: condition,
+                    notCondition: this.enableNotCondition ? not : undefined
+                };
+                this.trigger('actionBegin', args_1);
             }
             else {
                 if (this.enableSeparateConnector) {
@@ -1731,9 +1907,10 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
     };
     QueryBuilder.prototype.setMultiConnector = function (trgt) {
-        if (this.enableSeparateConnector && !this.headerTemplate) {
-            if (trgt.previousElementSibling && this.groupElem.querySelector('.e-btn-group')) {
-                trgt.parentElement.insertBefore(this.groupTemplate(true).querySelector('.e-btn-group'), trgt);
+        if (this.enableSeparateConnector && !this.headerTemplate && trgt.previousElementSibling) {
+            var btnGroupElem = this.groupTemplate(true).querySelector('.e-btn-group');
+            if (btnGroupElem) {
+                trgt.parentElement.insertBefore(btnGroupElem, trgt);
                 var notElem = trgt.previousElementSibling.childNodes[0];
                 if (notElem.classList.contains('e-qb-toggle')) {
                     notElem.style.display = 'none';
@@ -1776,9 +1953,11 @@ var QueryBuilder = /** @class */ (function (_super) {
             groupHdr = groupElem;
         }
         if (this.headerTemplate) {
-            args = { requestType: 'header-template-initialize', ruleID: groupElem.id,
+            args = {
+                requestType: 'header-template-initialize', ruleID: groupElem.id,
                 notCondition: this.enableNotCondition ? not : undefined,
-                condition: condition, rule: this.getRuleCollection(rule, false), groupID: groupID };
+                condition: condition, rule: this.getRuleCollection(rule, false), groupID: groupID
+            };
             this.trigger('actionBegin', args);
             if (this.enableSeparateConnector && groupElem.id.indexOf('rule') !== -1) {
                 args.requestType = 'rule-template-create';
@@ -1931,7 +2110,7 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.templateChange = function (element, value, type) {
         var grpElem = closest(element, '.e-group-container');
         var eventsArgs;
-        var rules = this.getParentGroup(grpElem);
+        var rules = grpElem && this.getParentGroup(grpElem);
         var ruleElem = closest(element, '.e-rule-container');
         var index = 0;
         if (this.allowValidation) {
@@ -1946,7 +2125,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 index++;
             }
         }
-        var rule = rules.rules[index];
+        var rule = rules && rules.rules[index];
         if (type === 'field') {
             this.selectedColumn = this.getColumn(value);
         }
@@ -1954,7 +2133,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.selectedColumn = this.getColumn(rule.field);
         }
         var operVal;
-        this.previousColumn = this.getColumn(rule.field);
+        this.previousColumn = rule && this.getColumn(rule.field);
         var beforeRules = this.getValidRules(this.rule);
         if (this.selectedColumn) {
             if (this.selectedColumn.operators) {
@@ -1969,11 +2148,16 @@ var QueryBuilder = /** @class */ (function (_super) {
         switch (type) {
             case 'field':
                 if (isNullOrUndefined(value)) {
-                    rule.field = '';
-                    rule.label = '';
-                    rule.type = '';
-                    rule.value = '';
-                    rule.operator = '';
+                    if (!isNullOrUndefined(rule)) {
+                        rule.field = '';
+                        rule.label = '';
+                        rule.type = '';
+                        rule.value = '';
+                        rule.operator = '';
+                    }
+                    else {
+                        return;
+                    }
                 }
                 else {
                     rule.field = value;
@@ -2024,10 +2208,14 @@ var QueryBuilder = /** @class */ (function (_super) {
                     ruleElement.className.indexOf('e-separate-rule') < 0) {
                     ruleElement.className += ' e-separate-rule';
                 }
-                var args = { requestType: 'template-create', action: type, ruleID: grpEle.id,
-                    fields: this.fields, rule: rule };
-                eventsArgs = { groupID: grpElem.id.replace(this.element.id + '_', ''), ruleID: grpEle.id.replace(this.element.id + '_', ''),
-                    value: rule.field, type: 'field' };
+                var args = {
+                    requestType: 'template-create', action: type, ruleID: grpEle.id,
+                    fields: this.fields, rule: rule
+                };
+                eventsArgs = {
+                    groupID: grpElem.id.replace(this.element.id + '_', ''), ruleID: grpEle.id.replace(this.element.id + '_', ''),
+                    value: rule.field, type: 'field'
+                };
                 this.trigger('actionBegin', args);
                 this.trigger('change', eventsArgs);
             }
@@ -2168,8 +2356,10 @@ var QueryBuilder = /** @class */ (function (_super) {
         var item = ddl.popupObj && ddl.popupObj.element.querySelector('.e-active');
         var itemData = ddl.getItemData();
         ddl.value = itemData.value;
-        var customArgs = { element: ddl.element, value: itemData.value, isInteracted: true,
-            previousItemData: this.prevItemData, previousItem: null, item: item, itemData: itemData, event: null, e: null };
+        var customArgs = {
+            element: ddl.element, value: itemData.value, isInteracted: true,
+            previousItemData: this.prevItemData, previousItem: null, item: item, itemData: itemData, event: null, e: null
+        };
         if (ddl.previousValue !== ddl.value) {
             this.changeField(customArgs);
         }
@@ -2282,8 +2472,10 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.selectedColumn = this.getColumn(ddlValue);
             var ruleElem = closest(flt, '.e-rule-container');
             var ruleID = ruleElem.id.replace(this.element.id + '_', '');
-            var eventsArgs = { groupID: grID, ruleID: ruleID, selectedField: this.fieldMode === 'DropdownTree' ?
-                    dl.value[0] : dl.value, cancel: false, type: 'field' };
+            var eventsArgs = {
+                groupID: grID, ruleID: ruleID, selectedField: this.fieldMode === 'DropdownTree' ?
+                    dl.value[0] : dl.value, cancel: false, type: 'field'
+            };
             if (!this.isImportRules && !this.prvtEvtTgrDaD) {
                 this.trigger('beforeChange', eventsArgs, function (observedChangeArgs) {
                     _this.fieldChangeSuccess(observedChangeArgs, tmpRl, flt, rl, dArg);
@@ -2872,19 +3064,25 @@ var QueryBuilder = /** @class */ (function (_super) {
             : getComponent(container.querySelector('.e-rule-filter .e-filter-input'), 'dropdownlist');
         var column = this.fieldMode === 'DropdownTree' ? this.getColumn(ddlObj.value[0]) : this.getColumn(ddlObj.value);
         if (typeof itemData.template === 'string' || itemData.template.write === undefined) {
-            var args = { rule: rule, ruleID: container.id, operator: tempRule.operator, field: column.field,
-                requestType: 'value-template-create' };
+            var args = {
+                rule: rule, ruleID: container.id, operator: tempRule.operator, field: column.field,
+                requestType: 'value-template-create'
+            };
             this.trigger('actionBegin', args);
         }
         else {
             var template = itemData.template;
             if (typeof template.write === 'string') {
-                getValue(template.write, window)({ elements: tempElements.length > 1 ? tempElements : tempElements[0], values: rule.value,
-                    operator: tempRule.operator, field: column.field, dataSource: column.values });
+                getValue(template.write, window)({
+                    elements: tempElements.length > 1 ? tempElements : tempElements[0], values: rule.value,
+                    operator: tempRule.operator, field: column.field, dataSource: column.values
+                });
             }
             else if (typeof itemData.template !== 'function') {
-                itemData.template.write({ elements: tempElements.length > 1 ? tempElements : tempElements[0],
-                    values: rule.value, operator: tempRule.operator, field: column.field, dataSource: column.values });
+                itemData.template.write({
+                    elements: tempElements.length > 1 ? tempElements : tempElements[0],
+                    values: rule.value, operator: tempRule.operator, field: column.field, dataSource: column.values
+                });
             }
         }
     };
@@ -3382,8 +3580,10 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         else {
             if (typeof itemData.template === 'string' || itemData.template.create === undefined) {
-                args = { requestType: 'value-template-initialize', ruleID: ruleID, field: field, operator: operator, rule: rule,
-                    renderTemplate: true };
+                args = {
+                    requestType: 'value-template-initialize', ruleID: ruleID, field: field, operator: operator, rule: rule,
+                    renderTemplate: true
+                };
                 this.trigger('actionBegin', args, function (observedActionArgs) {
                     isRendered = _this.actionBeginSuccessCallBack(observedActionArgs, itemData, ruleID, field, target);
                 });
@@ -3591,7 +3791,6 @@ var QueryBuilder = /** @class */ (function (_super) {
             element = element ? element : ruleElement.nextElementSibling.nextElementSibling.querySelector('input.e-control');
             operator = getComponent(element, 'dropdownlist').value.toString();
             rule.rules[index].operator = operator;
-            // Value Fields
             var valueContainer = ruleElement.nextElementSibling.nextElementSibling;
             var elementCln = valueContainer.querySelectorAll('input.e-control');
             if (elementCln.length < 1) {
@@ -3753,6 +3952,9 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
     };
     QueryBuilder.prototype.validateValue = function (rule, ruleElem, index) {
+        if (isNullOrUndefined(rule) && isNullOrUndefined(ruleElem)) {
+            return;
+        }
         if (!isNullOrUndefined(index)) {
             rule = rule.rules[index];
         }
@@ -3914,8 +4116,10 @@ var QueryBuilder = /** @class */ (function (_super) {
             if (grouplen) {
                 this.isPublic = true;
                 for (var i = 0, len = groups.length; i < len; i++) {
-                    this.updatedRule = { isLocked: groups[i].isLocked, condition: groups[i].condition,
-                        not: groups[i].not };
+                    this.updatedRule = {
+                        isLocked: groups[i].isLocked, condition: groups[i].condition,
+                        not: groups[i].not
+                    };
                     this.importRules(groups[i], groupElem, false, groups[i].not);
                 }
                 this.isPublic = false;
@@ -4044,10 +4248,10 @@ var QueryBuilder = /** @class */ (function (_super) {
         this.element.querySelector('.e-group-header').appendChild(collapseElem);
     };
     QueryBuilder.prototype.columnSort = function () {
-        if (this.sortDirection.toLowerCase() === 'descending') {
+        if (this.sortDirection && this.sortDirection.toLowerCase() === 'descending') {
             this.columns = new DataManager(this.columns).executeLocal(new Query().sortByDesc('field'));
         }
-        else if (this.sortDirection.toLowerCase() === 'ascending') {
+        else if (this.sortDirection && this.sortDirection.toLowerCase() === 'ascending') {
             this.columns = new DataManager(this.columns).executeLocal(new Query().sortBy('field'));
         }
     };
@@ -4534,8 +4738,10 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
         }
-        var dragEventArgs = { dragRuleID: targetElem !== null ? targetElem.id : grpElem !== null ? grpElem.id : null,
-            dragGroupID: grpElem !== null ? grpElem.id : null, cancel: false };
+        var dragEventArgs = {
+            dragRuleID: targetElem !== null ? targetElem.id : grpElem !== null ? grpElem.id : null,
+            dragGroupID: grpElem !== null ? grpElem.id : null, cancel: false
+        };
         this.trigger('drag', dragEventArgs);
         this.isDragEventPrevent = dragEventArgs.cancel;
     };
@@ -4556,8 +4762,10 @@ var QueryBuilder = /** @class */ (function (_super) {
         var prevRule;
         if (!isPreventelem) {
             var targetGrp = closest(e.target, '.e-group-container');
-            var dropEventArgs = { cancel: false, dropRuleID: targetGroup !== null ? targetGroup.id
-                    : targetGrp !== null ? targetGrp.id : null, dropGroupID: targetGrp !== null ? targetGrp.id : null };
+            var dropEventArgs = {
+                cancel: false, dropRuleID: targetGroup !== null ? targetGroup.id
+                    : targetGrp !== null ? targetGrp.id : null, dropGroupID: targetGrp !== null ? targetGrp.id : null
+            };
             this.trigger('drop', dropEventArgs);
             if (dropEventArgs.cancel) {
                 isPreventelem = true;
@@ -5326,7 +5534,8 @@ var QueryBuilder = /** @class */ (function (_super) {
         else {
             if (customObj && (customObj.type === 'question' || customObj.type === 'answer')) {
                 var notValue = rule.not;
-                rule = { 'label': rule.label, 'field': rule.field, 'operator': rule.operator, 'type': rule.type, 'value': rule.value,
+                rule = {
+                    'label': rule.label, 'field': rule.field, 'operator': rule.operator, 'type': rule.type, 'value': rule.value,
                     'condition': rule.condition, 'rules': rule.rules
                 };
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5648,21 +5857,40 @@ var QueryBuilder = /** @class */ (function (_super) {
         var columns = this.columns;
         var column;
         columns = col ? col : columns;
-        for (var i = 0, iLen = columns.length; i < iLen; i++) {
+        var fieldParts = this.separator !== '' ? (field ? field.split(this.separator) : []) : [field];
+        var rootField = fieldParts && fieldParts.length > 0 ? fieldParts[0] : null;
+        for (var i = 0; i < columns.length; i++) {
             if (columns[i].field === field) {
                 column = columns[i];
                 break;
             }
-            else if (columns[i].columns) {
-                column = this.getColumn(field, columns[i].columns);
-                if (column) {
+        }
+        if (!column && this.separator !== '') {
+            for (var i = 0; i < columns.length; i++) {
+                if (columns[i].field === rootField) {
+                    if (columns[i].columns) {
+                        var subField = field.substring(rootField.length + this.separator.length);
+                        if (subField) {
+                            column = this.getColumn(subField, columns[i].columns);
+                        }
+                        else {
+                            column = columns[i];
+                        }
+                    }
+                    else {
+                        column = columns[i];
+                    }
                     break;
                 }
             }
-            else if (field && field.indexOf(this.separator) > -1) {
-                if (this.separator !== '' && columns[i].field === field.split(this.separator)[0]) {
-                    column = columns[i];
-                    break;
+        }
+        if (!column) {
+            for (var i = 0; i < columns.length; i++) {
+                if (columns[i].columns) {
+                    column = this.getColumn(field, columns[i].columns);
+                    if (column) {
+                        break;
+                    }
                 }
             }
         }
@@ -6118,6 +6346,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         return false;
     };
     QueryBuilder.prototype.getSqlString = function (rules, enableEscape, queryStr, sqlLocale) {
+        var _this = this;
         var isRoot = false;
         if (!queryStr && queryStr !== '') {
             queryStr = '';
@@ -6126,86 +6355,74 @@ var QueryBuilder = /** @class */ (function (_super) {
         else {
             queryStr += '(';
         }
-        var condition = rules.condition;
         if (rules.not) {
-            var rulesNotCondition = void 0;
-            if (isRoot) {
-                rulesNotCondition = sqlLocale ? this.l10n.getConstant('NOT').toUpperCase() + ' (' : 'NOT (';
-                queryStr += rulesNotCondition;
-            }
-            else {
-                rulesNotCondition = sqlLocale ? ' ' + this.l10n.getConstant('NOT').toUpperCase() + ' (' : ' NOT (';
-                queryStr += rulesNotCondition;
-            }
+            var notPrefix = sqlLocale ? this.l10n.getConstant('NOT').toUpperCase() + ' ' : 'NOT ';
+            queryStr += isRoot ? notPrefix + '(' : ' ' + notPrefix + '(';
         }
-        if (rules.rules) {
-            for (var j = 0, jLen = rules.rules.length; j < jLen; j++) {
-                if (rules.rules[j].rules) {
-                    queryStr = this.getSqlString(rules.rules[j], enableEscape, queryStr, sqlLocale);
-                    if (this.enableSeparateConnector) {
-                        condition = rules.rules[j].condition;
+        if (rules.rules && rules.rules.length) {
+            queryStr += rules.rules.reduce(function (result, rule, j) {
+                var ruleStr = '';
+                if (rule.rules) {
+                    ruleStr = _this.getSqlString(rule, enableEscape, '', sqlLocale);
+                    if (_this.enableSeparateConnector) {
+                        rules.condition = rule.condition;
                     }
                 }
                 else {
-                    var rule = rules.rules[j];
+                    var ruleOpertor = sqlLocale ? _this.sqlOperators[rule.operator] : _this.operators[rule.operator];
                     var valueStr = '';
-                    var ruleOpertor = sqlLocale ? this.sqlOperators[rule.operator] : this.operators[rule.operator];
                     if (rule.value instanceof Array) {
                         if (rule.operator.toString().indexOf('between') > -1) {
-                            var ruleCondition = sqlLocale ? ' ' + this.l10n.getConstant('AND').toUpperCase() + ' ' : ' ' + 'AND' + ' ';
-                            if (rule.type === 'date' && !this.isDateFunction(rule.value[0])) {
-                                valueStr += '"' + rule.value[0] + '"' + ruleCondition + '"' + rule.value[1] + '"';
+                            var ruleCondition = sqlLocale ? ' ' + _this.l10n.getConstant('AND').toUpperCase() + ' ' : ' AND ';
+                            if (rule.type === 'date' && !_this.isDateFunction(rule.value[0])) {
+                                valueStr = "\"" + rule.value[0] + "\"" + ruleCondition + "\"" + rule.value[1] + "\"";
                             }
                             else {
-                                valueStr += rule.value[0] + ruleCondition + rule.value[1];
+                                valueStr = "" + rule.value[0] + ruleCondition + rule.value[1];
                             }
                         }
                         else {
                             if (typeof rule.value[0] === 'string' && rule.value !== null) {
-                                valueStr += '("' + rule.value[0] + '"';
-                                for (var k = 1, kLen = rule.value.length; k < kLen; k++) {
-                                    valueStr += ',"' + rule.value[k] + '"';
-                                }
-                                valueStr += ')';
+                                var valueArray = rule.value;
+                                valueStr = '("' + valueArray.join('","') + '")';
                             }
                             else {
-                                valueStr += '(' + rule.value + ')';
+                                valueStr = "(" + rule.value + ")";
                             }
                         }
                     }
                     else {
                         if (rule.operator.toString().indexOf('startswith') > -1) {
-                            valueStr += rule.value ? '("' + rule.value + '%")' : '(' + rule.value + ')';
+                            valueStr = rule.value ? "(\"" + rule.value + "%\")" : "(" + rule.value + ")";
                         }
                         else if (rule.operator.toString().indexOf('endswith') > -1) {
-                            valueStr += rule.value ? '("%' + rule.value + '")' : '(' + rule.value + ')';
+                            valueStr = rule.value ? "(\"%" + rule.value + "\")" : "(" + rule.value + ")";
                         }
                         else if (rule.operator.toString().indexOf('contains') > -1) {
-                            valueStr += rule.value ? '("%' + rule.value + '%")' : '(' + rule.value + ')';
+                            valueStr = rule.value ? "(\"%" + rule.value + "%\")" : "(" + rule.value + ")";
                         }
                         else {
                             if (rule.type === 'number' || typeof rule.value === 'boolean' ||
                                 (rule.value === null && (rule.operator.toString().indexOf('empty') < -1))) {
-                                valueStr += rule.value;
+                                valueStr = "" + rule.value;
                             }
                             else if (rule.operator.toString().indexOf('empty') > -1) {
-                                valueStr += '""';
+                                valueStr = '""';
                             }
                             else {
-                                valueStr += '"' + rule.value + '"';
+                                valueStr = "\"" + rule.value + "\"";
                             }
                         }
                     }
+                    var fieldName = rule.field;
+                    if (enableEscape) {
+                        fieldName = '`' + fieldName + '`';
+                    }
+                    else if (fieldName.indexOf(' ') > -1) {
+                        fieldName = '"' + fieldName + '"';
+                    }
                     if (rule.operator.toString().indexOf('null') > -1) {
-                        if (enableEscape) {
-                            rule.field = '`' + rule.field + '`';
-                        }
-                        else {
-                            if (rule.field.indexOf(' ') > -1) {
-                                rule.field = '"' + rule.field + '"';
-                            }
-                        }
-                        queryStr += rule.field + ' ' + ruleOpertor;
+                        ruleStr = fieldName + ' ' + ruleOpertor;
                     }
                     else {
                         var custOper = ruleOpertor;
@@ -6215,33 +6432,21 @@ var QueryBuilder = /** @class */ (function (_super) {
                         else if (rule.operator === 'isnotempty') {
                             custOper = '!=';
                         }
-                        if (enableEscape) {
-                            rule.field = '`' + rule.field + '`';
-                        }
-                        else {
-                            if (rule.field.indexOf(' ') > -1) {
-                                rule.field = '"' + rule.field + '"';
-                            }
-                        }
-                        queryStr += rule.field + ' ' + custOper + ' ' + valueStr;
-                    }
-                    if (rule.condition && rule.condition !== '') {
-                        condition = rule.condition;
+                        ruleStr = fieldName + ' ' + custOper + ' ' + valueStr;
                     }
                 }
-                if (j !== jLen - 1) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    var rule = rules.rules[j];
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (j !== rules.rules.length - 1) {
+                    var condition = rules.condition;
                     if (condition === '' || (rule && rule.condition !== '' && rule.custom && rule.custom.isCustom)) {
                         condition = rule.condition;
                     }
                     if (condition) {
-                        condition = sqlLocale ? this.l10n.getConstant(condition.toUpperCase()).toUpperCase() : condition.toUpperCase();
-                        queryStr += ' ' + condition + ' ';
+                        condition = sqlLocale ? _this.l10n.getConstant(condition.toUpperCase()).toUpperCase() : condition.toUpperCase();
+                        ruleStr += ' ' + condition + ' ';
                     }
                 }
-            }
+                return result + ruleStr;
+            }, '');
         }
         if (!isRoot) {
             queryStr += ')';
@@ -6559,23 +6764,19 @@ var QueryBuilder = /** @class */ (function (_super) {
                 return subOp[i].length;
             }
         }
-        //Left Parenthesis
         if (/^\(/.exec(sqlString)) {
             this.parser.push(['Left', '(']);
             return 1;
         }
-        //Right Parenthesis
         if (/^\)/.exec(sqlString)) {
             this.parser.push(['Right', ')']);
             return 1;
         }
-        //Boolean
         if (/^(true|false)/.exec(sqlString)) {
             matchValue = /^(true|false)/.exec(sqlString)[0];
             this.parser.push(['String', matchValue]);
             return matchValue.length;
         }
-        //Null
         if (/^null/.exec(sqlString)) {
             matchValue = /^null/.exec(sqlString)[0];
             this.parser.push(['String', null]);
@@ -6600,7 +6801,6 @@ var QueryBuilder = /** @class */ (function (_super) {
                 return matchValue.length;
             }
         }
-        //String
         var singleString = this.getSingleQuoteString(sqlString);
         if (singleString !== '') {
             matchValue = singleString;
@@ -6620,24 +6820,20 @@ var QueryBuilder = /** @class */ (function (_super) {
                 !this.checkCondition(sqlString, matchValue)) {
                 matchValue = this.combineSingleQuoteString(sqlString, matchValue);
             }
-            // end
             this.parser.push(['String', matchValue]);
             return matchValue.length;
         }
-        // Double String
         var doubleString = this.getDoubleQuoteString(sqlString);
         if (doubleString !== '') {
             matchValue = doubleString;
             this.parser.push(['DoubleString', matchValue]);
             return matchValue.length;
         }
-        //Number
         if (/^\d*\.?\d+/.exec(sqlString)) {
             matchValue = /^\d*\.?\d+/.exec(sqlString)[0];
             this.parser.push(['Number', matchValue]);
             return matchValue.length;
         }
-        //Negative Number
         if (/^-?\d*\.?\d+/.exec(sqlString)) {
             matchValue = /^-?\d*\.?\d+/.exec(sqlString)[0];
             this.parser.push(['Number', matchValue]);
@@ -6805,7 +7001,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 fieldName += this.separator;
             }
         }
-        return this.getColumn(fieldName).label;
+        return this.getColumn(fieldName) ? this.getColumn(fieldName).label : '';
     };
     QueryBuilder.prototype.processParser = function (parser, rules, levelColl, sqlLocale) {
         var j;
@@ -7037,12 +7233,16 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
         }
         if (this.enableSeparateConnector) {
-            this.addRules([{ 'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
-                    'value': getRule.value, 'condition': getRule.condition }], groupId);
+            this.addRules([{
+                    'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
+                    'value': getRule.value, 'condition': getRule.condition
+                }], groupId);
         }
         else {
-            this.addRules([{ 'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
-                    'value': getRule.value }], groupId);
+            this.addRules([{
+                    'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
+                    'value': getRule.value
+                }], groupId);
         }
         this.ruleIndex = -1;
     };
@@ -7217,115 +7417,65 @@ var QueryBuilder = /** @class */ (function (_super) {
         this.disableRuleControls(target, groupElem, isDisabled);
     };
     QueryBuilder.prototype.disableRuleControls = function (target, groupElem, isDisabled) {
-        var ddlElement = groupElem.querySelectorAll('.e-control.e-dropdownlist');
-        var numericElement = groupElem.querySelectorAll('.e-control.e-numerictextbox');
-        var textElement = groupElem.querySelectorAll('.e-control.e-textbox');
-        var dateElement = groupElem.querySelectorAll('.e-control.e-datepicker');
-        var checkboxElement = groupElem.querySelectorAll('.e-control.e-checkbox');
-        var radioBtnElement = groupElem.querySelectorAll('.e-control.e-radio');
-        var multiSelectElement = groupElem.querySelectorAll('.e-control.e-multiselect');
-        var deleteElem = groupElem.querySelectorAll('.e-rule-delete');
-        var lockElem = groupElem.querySelectorAll('.e-lock-rule');
-        var cloneElem = groupElem.querySelectorAll('.e-clone-rule');
-        var ruleElem = groupElem.querySelectorAll('.e-rule-container');
-        for (var i = 0; i < deleteElem.length; i++) {
+        var disableComponents = function (elements, componentGetter, isDisabled) {
+            elements.forEach(function (element) {
+                var component = componentGetter(element);
+                if ('enabled' in component) {
+                    component.enabled = !isDisabled;
+                }
+                else if ('disabled' in component) {
+                    component.disabled = isDisabled;
+                }
+            });
+        };
+        var elements = {
+            ddl: groupElem.querySelectorAll('.e-control.e-dropdownlist'),
+            numeric: groupElem.querySelectorAll('.e-control.e-numerictextbox'),
+            text: groupElem.querySelectorAll('.e-control.e-textbox'),
+            date: groupElem.querySelectorAll('.e-control.e-datepicker'),
+            checkbox: groupElem.querySelectorAll('.e-control.e-checkbox'),
+            radio: groupElem.querySelectorAll('.e-control.e-radio'),
+            multiSelect: groupElem.querySelectorAll('.e-control.e-multiselect'),
+            deleteElem: groupElem.querySelectorAll('.e-rule-delete'),
+            lockElem: groupElem.querySelectorAll('.e-lock-rule'),
+            cloneElem: groupElem.querySelectorAll('.e-clone-rule'),
+            ruleElem: groupElem.querySelectorAll('.e-rule-container')
+        };
+        elements.deleteElem.forEach(function (elem, i) {
             if (isDisabled) {
-                if (ruleElem[i] && ruleElem[i].classList.contains('e-disable')) {
-                    ruleElem[i].classList.add('e-disable');
+                if (elements.ruleElem[i] && elements.ruleElem[i].classList.contains('e-disable')) {
+                    elements.ruleElem[i].classList.add('e-disable');
                 }
-                deleteElem[i].disabled = true;
-                if (cloneElem[i]) {
-                    cloneElem[i].disabled = true;
+                elements.deleteElem[i].disabled = true;
+                if (elements.cloneElem[i]) {
+                    elements.cloneElem[i].disabled = true;
                 }
-                if (lockElem[i] !== target) {
-                    lockElem[i].disabled = true;
-                    lockElem[i].children[0].classList.remove('e-unlock');
-                    lockElem[i].children[0].classList.add('e-lock');
+                if (elements.lockElem[i] !== target) {
+                    elements.lockElem[i].disabled = true;
+                    elements.lockElem[i].children[0].classList.remove('e-unlock');
+                    elements.lockElem[i].children[0].classList.add('e-lock');
                 }
             }
             else {
-                if (ruleElem[i]) {
-                    ruleElem[i].classList.remove('e-disable');
+                if (elements.ruleElem[i]) {
+                    elements.ruleElem[i].classList.remove('e-disable');
                 }
-                if (cloneElem[i]) {
-                    cloneElem[i].disabled = false;
+                if (elements.cloneElem[i]) {
+                    elements.cloneElem[i].disabled = false;
                 }
-                deleteElem[i].disabled = false;
-                lockElem[i].disabled = false;
-                lockElem[i].children[0].classList.remove('e-lock');
-                lockElem[i].children[0].classList.add('e-unlock');
-            }
-        }
-        var dropDownObj;
-        var numericObj;
-        var textObj;
-        var dateObj;
-        var checkBoxObj;
-        var radioBtnObj;
-        var multiSelectObj;
-        for (var i = 0; i < ddlElement.length; i++) {
-            dropDownObj = getComponent(ddlElement[i], 'dropdownlist');
-            if (isDisabled) {
-                dropDownObj.enabled = false;
-            }
-            else {
-                dropDownObj.enabled = true;
-            }
-        }
-        for (var i = 0; i < numericElement.length; i++) {
-            numericObj = getComponent(numericElement[i], 'numerictextbox');
-            if (isDisabled) {
-                numericObj.enabled = false;
-            }
-            else {
-                numericObj.enabled = true;
-            }
-        }
-        for (var i = 0; i < textElement.length; i++) {
-            textObj = getComponent(textElement[i], 'textbox');
-            if (isDisabled) {
-                textObj.enabled = false;
-            }
-            else {
-                textObj.enabled = true;
-            }
-        }
-        for (var i = 0; i < dateElement.length; i++) {
-            dateObj = getComponent(dateElement[i], 'datepicker');
-            if (isDisabled) {
-                dateObj.enabled = false;
-            }
-            else {
-                dateObj.enabled = true;
+                elements.deleteElem[i].disabled = false;
+                elements.lockElem[i].disabled = false;
+                elements.lockElem[i].children[0].classList.remove('e-lock');
+                elements.lockElem[i].children[0].classList.add('e-unlock');
             }
-        }
-        for (var i = 0; i < checkboxElement.length; i++) {
-            checkBoxObj = getComponent(checkboxElement[i], 'checkbox');
-            if (isDisabled) {
-                checkBoxObj.disabled = true;
-            }
-            else {
-                checkBoxObj.disabled = false;
-            }
-        }
-        for (var i = 0; i < radioBtnElement.length; i++) {
-            radioBtnObj = getComponent(radioBtnElement[i], 'radio');
-            if (isDisabled) {
-                radioBtnObj.disabled = true;
-            }
-            else {
-                radioBtnObj.disabled = false;
-            }
-        }
-        for (var i = 0; i < multiSelectElement.length; i++) {
-            multiSelectObj = getComponent(multiSelectElement[i], 'multiselect');
-            if (isDisabled) {
-                multiSelectObj.enabled = false;
-            }
-            else {
-                multiSelectObj.enabled = true;
-            }
-        }
+        });
+        disableComponents(elements.ddl, function (elem) { return getComponent(elem, 'dropdownlist'); }, isDisabled);
+        disableComponents(elements.numeric, function (elem) { return getComponent(elem, 'numerictextbox'); }, isDisabled);
+        disableComponents(elements.text, function (elem) { return getComponent(elem, 'textbox'); }, isDisabled);
+        disableComponents(elements.date, function (elem) { return getComponent(elem, 'datepicker'); }, isDisabled);
+        disableComponents(elements.checkbox, function (elem) { return getComponent(elem, 'checkbox'); }, isDisabled);
+        disableComponents(elements.radio, function (elem) { return getComponent(elem, 'radio'); }, isDisabled);
+        disableComponents(elements.multiSelect, function (elem) { return getComponent(elem, 'multiselect'); }, isDisabled);
     };
     __decorate([
         Event()