@syncfusion/ej2-querybuilder 24.2.9 → 25.1.37

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

@@ -127,6 +127,9 @@ var Rule = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Rule.prototype, "not", void 0);
+    __decorate([
+        Property(false)
+    ], Rule.prototype, "isLocked", void 0);
     return Rule;
 }(ChildProperty));
 export { Rule };
@@ -164,6 +167,18 @@ var ShowButtons = /** @class */ (function (_super) {
     function ShowButtons() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    __decorate([
+        Property(false)
+    ], ShowButtons.prototype, "cloneRule", void 0);
+    __decorate([
+        Property(false)
+    ], ShowButtons.prototype, "cloneGroup", void 0);
+    __decorate([
+        Property(false)
+    ], ShowButtons.prototype, "lockRule", void 0);
+    __decorate([
+        Property(false)
+    ], ShowButtons.prototype, "lockGroup", void 0);
     __decorate([
         Property(true)
     ], ShowButtons.prototype, "ruleDelete", void 0);
@@ -182,7 +197,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         var _this = _super.call(this, options, element) || this;
         _this.isReadonly = true;
         _this.fields = { text: 'label', value: 'field' };
-        _this.updatedRule = { not: false, condition: 'and' };
+        _this.updatedRule = { not: false, condition: 'and', isLocked: false };
         _this.isLocale = false;
         _this.isRefreshed = false;
         _this.isNotified = false;
@@ -193,6 +208,14 @@ var QueryBuilder = /** @class */ (function (_super) {
         _this.isDestroy = false;
         _this.isGetNestedData = false;
         _this.isCustomOprCols = [];
+        _this.groupCounter = 0;
+        _this.lockItems = [];
+        _this.groupIndex = -1;
+        _this.ruleIndex = -1;
+        _this.isLastGroup = false;
+        _this.cloneGrpBtnClick = false;
+        _this.isMiddleGroup = false;
+        _this.cloneRuleBtnClick = false;
         MultiSelect.Inject(CheckBoxSelection);
         return _this;
     }
@@ -245,6 +268,14 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.getModuleName = function () {
         return 'query-builder';
     };
+    QueryBuilder.prototype.requiredModules = function () {
+        var modules = [];
+        modules.push({
+            member: 'query-library',
+            args: [this]
+        });
+        return modules;
+    };
     QueryBuilder.prototype.GetRootColumnName = function (field) {
         return this.separator ? field.split(this.separator)[0] : field;
     };
@@ -438,31 +469,51 @@ var QueryBuilder = /** @class */ (function (_super) {
             txtareaElem.style.height = txtareaElem.scrollHeight + 'px';
         }
         if (target.tagName === 'BUTTON' && target.className.indexOf('e-qb-toggle') < 0) {
-            if (target.className.indexOf('e-removerule') > -1) {
-                this.actionButton = target;
-                this.deleteRule(target);
-            }
-            else if (target.className.indexOf('e-deletegroup') > -1) {
-                this.actionButton = target;
-                this.deleteGroup(closest(target, '.e-group-container'));
-            }
-            else if (target.className.indexOf('e-edit-rule') > -1) {
-                var animation = new Animation({ duration: 1000, delay: 0 });
-                animation.animate('.e-query-builder', { name: 'SlideLeftIn' });
-                document.getElementById(this.element.id + '_summary_content').style.display = 'none';
-                if (this.element.querySelectorAll('.e-group-container').length < 1) {
-                    this.addGroupElement(false, this.element, this.rule.condition, false, this.rule.not);
-                    var mRules = extend({}, this.rule, {}, true);
-                    this.setGroupRules(mRules);
-                    this.renderSummaryCollapse();
-                }
-                else {
-                    var groupElem = this.element.querySelector('.e-group-container');
-                    if (groupElem.querySelectorAll('.e-collapse-rule').length < 1) {
+            switch (true) {
+                case target.className.indexOf('e-removerule') > -1:
+                    this.actionButton = target;
+                    this.deleteRule(target);
+                    break;
+                case target.className.indexOf('e-clone-rule-btn') > -1:
+                    this.actionButton = target;
+                    this.cloneRuleBtnClick = true;
+                    this.ruleClone(target);
+                    break;
+                case target.className.indexOf('e-lock-rule-btn') > -1:
+                    this.actionButton = target;
+                    this.ruleLock(target);
+                    break;
+                case target.className.indexOf('e-lock-grp-btn') > -1:
+                    this.actionButton = target;
+                    this.groupLock(target);
+                    break;
+                case target.className.indexOf('e-clone-grp-btn') > -1:
+                    this.actionButton = target;
+                    this.cloneGrpBtnClick = true;
+                    this.groupClone(closest(target, '.e-group-container'));
+                    break;
+                case target.className.indexOf('e-deletegroup') > -1:
+                    this.actionButton = target;
+                    this.deleteGroup(closest(target, '.e-group-container'));
+                    break;
+                case target.className.indexOf('e-edit-rule') > -1:
+                    var animation = new Animation({ duration: 1000, delay: 0 });
+                    animation.animate('.e-query-builder', { name: 'SlideLeftIn' });
+                    document.getElementById(this.element.id + '_summary_content').style.display = 'none';
+                    if (this.element.querySelectorAll('.e-group-container').length < 1) {
+                        this.addGroupElement(false, this.element, this.rule.condition, false, this.rule.not);
+                        var mRules = extend({}, this.rule, {}, true);
+                        this.setGroupRules(mRules);
                         this.renderSummaryCollapse();
                     }
-                    groupElem.style.display = 'block';
-                }
+                    else {
+                        var groupElem = this.element.querySelector('.e-group-container');
+                        if (groupElem.querySelectorAll('.e-collapse-rule').length < 1) {
+                            this.renderSummaryCollapse();
+                        }
+                        groupElem.style.display = 'block';
+                    }
+                    break;
             }
         }
         else if ((target.tagName === 'LABEL' && target.parentElement.className.indexOf('e-btn-group') > -1) ||
@@ -562,7 +613,18 @@ var QueryBuilder = /** @class */ (function (_super) {
         else {
             ruleElem = this.createElement('div', { attrs: { class: 'e-rule-container' } });
             ruleElem.setAttribute('id', target.id + '_rule' + this.ruleIdCounter);
-            ruleListElem.appendChild(ruleElem);
+            if (this.showButtons.cloneRule && this.cloneRuleBtnClick) {
+                if (this.ruleIndex < 0) {
+                    ruleListElem.appendChild(ruleElem);
+                }
+                else {
+                    ruleListElem.insertBefore(ruleElem, ruleListElem.children[this.ruleIndex + 1]); // added clone rule to next position
+                }
+                this.cloneRuleBtnClick = false;
+            }
+            else {
+                ruleListElem.appendChild(ruleElem);
+            }
             this.ruleIdCounter++;
         }
         if (column && column.ruleTemplate && rule) {
@@ -612,6 +674,21 @@ var QueryBuilder = /** @class */ (function (_super) {
             elem = this.ruleElem.querySelector('.e-rule-field').cloneNode(true);
             ruleElem.appendChild(elem);
         }
+        if (this.showButtons.lockGroup) {
+            removeClass(ruleElem.querySelectorAll('.e-lock-grp-btn'), 'e-button-hide');
+        }
+        if (this.showButtons.lockRule) {
+            removeClass(ruleElem.querySelectorAll('.e-lock-rule-btn'), 'e-button-hide');
+        }
+        if (this.showButtons.cloneGroup) {
+            removeClass(ruleElem.querySelectorAll('.e-clone-grp-btn'), 'e-button-hide');
+        }
+        if (this.showButtons.cloneRule) {
+            removeClass(ruleElem.querySelectorAll('.e-clone-rule-btn'), 'e-button-hide');
+        }
+        if (this.showButtons.ruleDelete) {
+            removeClass(ruleElem.querySelectorAll('.e-lock-grp-btn'), 'e-button-hide');
+        }
         if (column && column.ruleTemplate && rule) {
             this.renderReactTemplates();
         }
@@ -655,7 +732,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             else {
                 ruleElem = this.appendRuleElem(trgt, column, act, pId, 'field');
                 ruleElem.querySelector('.e-filter-input').setAttribute('id', ruleElem.id + '_filterkey');
-                var element = ruleElem.querySelector('button');
+                var element = ruleElem.querySelector('.e-rule-delete');
                 if (this.element.className.indexOf('e-device') > -1 || this.displayMode === 'Vertical') {
                     element.textContent = this.l10n.getConstant('Remove');
                     addClass([element], 'e-flat');
@@ -665,8 +742,11 @@ var QueryBuilder = /** @class */ (function (_super) {
                     addClass([element], 'e-round');
                     addClass([element], 'e-icon-btn');
                     element.setAttribute('title', this.l10n.getConstant('DeleteRule'));
-                    element = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-delete-icon' } });
-                    ruleElem.querySelector('button').appendChild(element);
+                    var spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-delete-icon' } });
+                    ruleElem.querySelector('.e-rule-delete').appendChild(spanElement);
+                }
+                if (!this.showButtons.ruleDelete) {
+                    element.classList.add('e-button-hide');
                 }
             }
             if (this.displayMode === 'Vertical' || this.element.className.indexOf('e-device') > -1) {
@@ -697,6 +777,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                     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;
                     }
@@ -704,8 +787,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                         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'
+                        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);
@@ -795,12 +877,23 @@ var QueryBuilder = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var custom = rule.custom;
             if (Object.keys(rule).length) {
-                rules.rules.push({
-                    'field': rule.field, 'type': rule.type, 'label': rule.label, 'operator': rule.operator, value: rule.value
-                });
-                if (custom) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    rules.rules[rules.rules.length - 1].custom = custom;
+                if (this.ruleIndex < 0) {
+                    rules.rules.push({
+                        'field': rule.field, 'type': rule.type, 'label': rule.label, 'operator': rule.operator, value: rule.value
+                    });
+                    if (custom) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        rules.rules[rules.rules.length - 1].custom = custom;
+                    }
+                }
+                else {
+                    rules.rules.splice(this.ruleIndex + 1, 0, {
+                        'field': rule.field, 'type': rule.type, 'label': rule.label, 'operator': rule.operator, value: rule.value
+                    });
+                    if (custom) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        rules.rules[this.ruleIndex + 1].custom = custom;
+                    }
                 }
             }
             else {
@@ -808,6 +901,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     newRule.custom = custom;
                 }
+                if (this.autoSelectField) {
+                    rule.field = newRule.field = this.rule.rules[0].field;
+                }
                 rules.rules.push(newRule);
             }
         }
@@ -1007,6 +1103,8 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.ruleTemplate = function () {
         var tempElem;
         var clsName;
+        var cloneClsName;
+        var lockClsName;
         var ruleElem = this.createElement('div');
         var fieldElem = this.createElement('div', { attrs: { class: 'e-rule-field' } });
         tempElem = this.createElement('div', { attrs: { class: 'e-rule-filter' } });
@@ -1018,6 +1116,24 @@ var QueryBuilder = /** @class */ (function (_super) {
         tempElem = this.createElement('div', { attrs: { class: 'e-rule-value' } });
         fieldElem.appendChild(tempElem);
         tempElem = this.createElement('div', { attrs: { class: 'e-rule-value-delete' } });
+        if (this.showButtons.cloneRule) {
+            cloneClsName = 'e-clone-rule-btn e-clone-rule e-css e-btn e-small e-round e-icon-btn';
+        }
+        else {
+            cloneClsName = 'e-clone-rule-btn e-clone-rule e-css e-btn e-small e-round e-icon-btn e-button-hide';
+        }
+        if (this.showButtons.lockRule) {
+            lockClsName = 'e-lock-rule-btn e-lock-rule e-css e-btn e-small e-round e-icons e-icon-btn';
+        }
+        else {
+            lockClsName = 'e-lock-rule-btn e-lock-rule e-css e-btn e-small e-round e-icons e-icon-btn e-button-hide';
+        }
+        var cloneRuleBtnElem = this.createElement('button', { attrs: { title: this.l10n.getConstant('CloneRule'), type: 'button', class: cloneClsName } });
+        var spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-copy' } });
+        cloneRuleBtnElem.appendChild(spanElement);
+        var cloneLockBtnElem = this.createElement('button', { attrs: { title: this.l10n.getConstant('LockRule'), type: 'button', class: lockClsName } });
+        spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-unlock' } });
+        cloneLockBtnElem.appendChild(spanElement);
         if (this.showButtons.ruleDelete || isNullOrUndefined(this.showButtons.ruleDelete)) {
             clsName = 'e-removerule e-rule-delete e-css e-btn e-small';
         }
@@ -1025,6 +1141,8 @@ var QueryBuilder = /** @class */ (function (_super) {
             clsName = 'e-removerule e-rule-delete e-css e-btn e-small e-button-hide';
         }
         var delBtnElem = this.createElement('button', { attrs: { type: 'button', class: clsName } });
+        tempElem.appendChild(cloneRuleBtnElem);
+        tempElem.appendChild(cloneLockBtnElem);
         tempElem.appendChild(delBtnElem);
         fieldElem.appendChild(tempElem);
         ruleElem.appendChild(fieldElem);
@@ -1094,9 +1212,6 @@ var QueryBuilder = /** @class */ (function (_super) {
                 button.appendTo(dltGroupBtn);
                 dltGroupBtn.setAttribute('title', this.l10n.getConstant('DeleteGroup'));
                 rippleEffect(dltGroupBtn, { selector: '.deletegroup' });
-                if (!this.headerTemplate) {
-                    groupElem.querySelector('.e-group-action').appendChild(dltGroupBtn);
-                }
                 var ruleList = target.querySelector('.e-rule-list');
                 var childElems = ruleList.children;
                 var grpLen = 0;
@@ -1105,20 +1220,72 @@ var QueryBuilder = /** @class */ (function (_super) {
                         grpLen += 1;
                     }
                 }
-                ruleList.appendChild(groupElem);
+                if (this.showButtons.cloneGroup && this.cloneGrpBtnClick) {
+                    if (this.groupIndex === (childElems.length - 1)) {
+                        ruleList.appendChild(groupElem);
+                        this.isLastGroup = true;
+                    }
+                    else {
+                        childElems[this.groupIndex + 1].parentNode.insertBefore(groupElem, childElems[this.groupIndex + 1]); // clone the element to nxt element
+                        this.isMiddleGroup = true;
+                    }
+                }
+                else {
+                    ruleList.appendChild(groupElem);
+                }
                 var level = this.levelColl[target.id].slice(0);
                 level.push(grpLen);
                 this.levelColl[groupElem.id] = level;
+                if (this.groupIndex > -1) {
+                    this.refreshLevelColl();
+                }
                 if (!this.isImportRules) {
                     this.isAddSuccess = true;
                     this.addGroups([], target.id.replace(this.element.id + '_', ''));
                     this.isAddSuccess = false;
-                    if (isBtnClick) {
+                    if (isBtnClick && this.addRuleToNewGroups) {
                         this.addRuleElement(groupElem, {});
                     }
                 }
+                if (!this.headerTemplate) {
+                    var lockClsName = '';
+                    if (this.showButtons.cloneGroup) {
+                        lockClsName = 'e-clone-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn';
+                    }
+                    else {
+                        lockClsName = 'e-clone-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn e-button-hide';
+                    }
+                    var cloneBtnElem = this.createElement('button', { attrs: { title: this.l10n.getConstant('CloneGroup'), type: 'button', class: lockClsName } });
+                    var spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-copy' } });
+                    cloneBtnElem.appendChild(spanElement);
+                    groupElem.querySelector('.e-group-action').appendChild(cloneBtnElem);
+                    if (this.showButtons.lockGroup) {
+                        lockClsName = 'e-lock-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn';
+                    }
+                    else {
+                        lockClsName = 'e-lock-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn e-button-hide';
+                    }
+                    var lockBtnElem = this.createElement('button', { attrs: { title: this.l10n.getConstant('LockGroup'), type: 'button', class: lockClsName } });
+                    var lockSpanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-unlock' } });
+                    lockBtnElem.appendChild(lockSpanElement);
+                    groupElem.querySelector('.e-group-action').appendChild(lockBtnElem);
+                    groupElem.querySelector('.e-group-action').appendChild(dltGroupBtn);
+                }
             }
             else {
+                if (!this.headerTemplate) {
+                    var lockClsName = '';
+                    if (this.showButtons.lockGroup) {
+                        lockClsName = 'e-lock-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn';
+                    }
+                    else {
+                        lockClsName = 'e-lock-grp-btn e-css e-btn e-small e-round e-icons e-icon-btn e-button-hide';
+                    }
+                    var lockBtnElem = this.createElement('button', { attrs: { title: this.l10n.getConstant('LockGroup'), type: 'button', class: lockClsName } });
+                    var spanElement = this.createElement('span', { attrs: { class: 'e-btn-icon e-icons e-unlock' } });
+                    lockBtnElem.appendChild(spanElement);
+                    groupElem.querySelector('.e-group-action').appendChild(lockBtnElem);
+                }
                 target.appendChild(groupElem);
                 this.levelColl[groupElem.id] = [0];
             }
@@ -1454,7 +1621,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.prevItemData = args.itemData;
             var fieldElem = closest(args.element, '.e-rule-filter') || closest(args.element, '.e-rule-sub-filter');
             var column = this.fieldMode === 'DropdownTree' ? this.getColumn(args.value[0]) : this.getColumn(args.value);
-            if (this.fieldMode === 'DropdownTree' && fieldElem != null) {
+            if (this.fieldMode === 'DropdownTree' && fieldElem !== null) {
                 var ddtElem = fieldElem.querySelector('.e-dropdowntree.e-control');
                 var ddt = getComponent(ddtElem, 'dropdowntree');
                 if (column) {
@@ -1526,7 +1693,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         var filterElem = closest(ddlArgs.element, '.e-rule-filter');
         filterElem = filterElem ? filterElem : closest(ddlArgs.element, '.e-rule-sub-filter');
         var ddlObj = getComponent(ddlArgs.element, 'dropdownlist');
-        if (this.fieldMode === 'DropdownTree' && filterElem != null) {
+        if (this.fieldMode === 'DropdownTree' && filterElem !== null) {
             ddlObj = getComponent(ddlArgs.element, 'dropdowntree');
         }
         var element = closest(ddlArgs.element, '.e-group-container');
@@ -1655,7 +1822,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.GetRootColumnName(rule.field) === this.GetRootColumnName(this.previousColumn.field))) {
             var subField = this.selectedColumn.columns;
             for (var i = 0; i < subField.length; i++) {
-                if (rule.field === subField[i].field || rule.field.indexOf(subField[i].field) > -1) {
+                if (rule.field === subField[i].field) {
                     dropDownList.value = subField[i].field;
                     this.selectedColumn = subField[i];
                     subFieldValue = true;
@@ -1694,7 +1861,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     rule.value = [];
                 }
             }
-            else if (typeof rule.value === 'object' && rule.value != null) {
+            else if (typeof rule.value === 'object' && rule.value !== null) {
                 rule.value = rule.value.length > 0 ? rule.value[0] : rule.type === 'number' ? 0 : '';
             }
             if (ddlArgs.previousItemData) {
@@ -1721,6 +1888,9 @@ var QueryBuilder = /** @class */ (function (_super) {
             if (valElem && this.getColumn(rule.field).template) {
                 filterElem = operatorElem.previousElementSibling;
             }
+            if (valElem.children.length == 0) {
+                filterElem = operatorElem.previousElementSibling;
+            }
             this.changeRuleValues(filterElem, rule, tempRule, ddlArgs);
         }
     };
@@ -1751,7 +1921,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                 tempRule.type = this.fieldMode === 'DropdownTree' ? this.getColumn(fieldObj.value[0]).type :
                     this.getColumn(fieldObj.value).type;
                 var itemData = ddlArgs.itemData;
-                this.renderValues(operatorElem, itemData, ddlArgs.previousItemData, true, rule, tempRule, ddlArgs.element);
+                if (ddlObj.value !== '') {
+                    this.renderValues(operatorElem, itemData, ddlArgs.previousItemData, true, rule, tempRule, ddlArgs.element);
+                }
             }
             else {
                 var ruleId = closest(operatorElem, '.e-rule-container').id;
@@ -1765,7 +1937,14 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
                 var height = (this.element.className.indexOf('e-device') > -1) ? '250px' : '200px';
                 var value = operatorList[0].value;
-                value = rule ? (rule.operator !== '' ? rule.operator : value) : value;
+                var ddlIdx = 0;
+                if (!this.autoSelectOperator) {
+                    value = '';
+                    ddlIdx = -1;
+                }
+                if (this.isImportRules || (this.ruleIndex > -1 || this.groupIndex > -1)) {
+                    value = rule ? (rule.operator ? rule.operator : value) : value;
+                }
                 var ddlOperator = void 0;
                 ddlOperator = {
                     dataSource: operatorList,
@@ -1773,7 +1952,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     placeholder: this.l10n.getConstant('SelectOperator'),
                     popupHeight: ((operatorList.length > 5) ? height : 'auto'),
                     change: this.changeField.bind(this),
-                    index: 0,
+                    index: ddlIdx,
                     value: value,
                     open: this.popupOpen.bind(this, false)
                 };
@@ -1787,7 +1966,12 @@ var QueryBuilder = /** @class */ (function (_super) {
                     tempRule.type = this.selectedColumn.type;
                     tempRule.operator = rule.operator;
                 }
-                this.renderValues(operatorElem, this.selectedColumn, ddlArgs.previousItemData, false, rule, tempRule, ddlArgs.element);
+                if (!isNullOrUndefined(value) && value !== '') {
+                    this.renderValues(operatorElem, this.selectedColumn, ddlArgs.previousItemData, false, rule, tempRule, ddlArgs.element);
+                }
+                else if (this.autoSelectField && this.autoSelectOperator) {
+                    this.renderValues(operatorElem, this.selectedColumn, ddlArgs.previousItemData, false, rule, tempRule, ddlArgs.element);
+                }
             }
         }
         if (!this.isImportRules) {
@@ -2008,17 +2192,11 @@ var QueryBuilder = /** @class */ (function (_super) {
         if (!this.dataColl.length && values.length) {
             isValues = true;
         }
-        var fieldValue = this.selectedRule.field;
-        var isNested = this.selectedRule.field.indexOf(this.separator);
-        if (isNested !== 0 && this.fieldMode !== 'DropdownTree') {
-            var nest = this.selectedRule.field.split(this.separator);
-            fieldValue = nest[nest.length - 1];
-        }
         var multiSelectValue;
         multiSelectValue = {
             dataSource: isValues ? values : (isFetched ? ds : this.dataManager),
             query: new Query([rule.field]),
-            fields: { text: fieldValue, value: fieldValue },
+            fields: { text: this.selectedRule.field, value: this.selectedRule.field },
             placeholder: this.l10n.getConstant('SelectValue'),
             value: selectedValue,
             mode: 'CheckBox',
@@ -2149,14 +2327,14 @@ var QueryBuilder = /** @class */ (function (_super) {
         var columnData = this.getItemData(parentId);
         var selectedValue;
         var isTemplate = (typeof columnData.template === 'string');
-        if (this.isImportRules || this.isPublic || isTemplate) {
+        if (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1 || this.isPublic || isTemplate) {
             selectedValue = rule.value;
         }
         else {
             selectedValue = this.setDefaultValue(parentId, false, false);
         }
         if ((operator === 'in' || operator === 'notin') && (this.dataColl.length || columnData.values)) {
-            selectedVal = this.isImportRules ? rule.value : this.setDefaultValue(parentId, true, false);
+            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value : this.setDefaultValue(parentId, true, false);
             this.renderMultiSelect(columnData, parentId, idx, selectedVal, columnData.values);
             if (this.displayMode === 'Vertical' || this.element.className.indexOf('e-device') > -1) {
                 ruleValElem.style.width = '100%';
@@ -2168,7 +2346,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         else {
             if (operator === 'in' || operator === 'notin') {
-                selectedVal = this.isImportRules ? rule.value : this.setDefaultValue(parentId, true, false);
+                selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value : this.setDefaultValue(parentId, true, false);
                 selectedValue = selectedVal.join(',');
             }
             var txtBox = void 0;
@@ -2188,9 +2366,9 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.renderNumberValue = function (parentId, rule, operator, idx, ruleValElem, itemData, length) {
         var columnData = this.getItemData(parentId);
         var isTemplate = (typeof columnData.template === 'string');
-        var selectedVal = (this.isImportRules || this.isPublic || isTemplate) ? rule.value : this.setDefaultValue(parentId, false, true);
+        var selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1 || this.isPublic || isTemplate) ? rule.value : this.setDefaultValue(parentId, false, true);
         if ((operator === 'in' || operator === 'notin') && (this.dataColl.length || columnData.values)) {
-            selectedVal = this.isImportRules ? rule.value : this.setDefaultValue(parentId, true, false);
+            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value : this.setDefaultValue(parentId, true, false);
             this.renderMultiSelect(columnData, parentId, idx, selectedVal, columnData.values);
             if (this.element.className.indexOf('e-device') > -1 || this.displayMode === 'Vertical') {
                 ruleValElem.style.width = '100%';
@@ -2201,7 +2379,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
         }
         else if (operator === 'in' || operator === 'notin') {
-            selectedVal = this.isImportRules ? rule.value : this.setDefaultValue(parentId, true, false);
+            selectedVal = (this.isImportRules || this.ruleIndex > -1 || this.groupIndex > -1) ? rule.value : this.setDefaultValue(parentId, true, false);
             var selVal = selectedVal.join(',');
             var txtInp = void 0;
             txtInp = {
@@ -2474,8 +2652,8 @@ var QueryBuilder = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             : this.getColumn(filtObj.value);
         this.selectedRule = column;
+        var ddlObj = getComponent(target.querySelector('input'), 'dropdownlist');
         if (isRender) {
-            var ddlObj = getComponent(target.querySelector('input'), 'dropdownlist');
             itemData = element.id.indexOf('operator') > -1 ? itemData : this.selectedRule;
             if (itemData.operators) {
                 ddlObj.value = null;
@@ -2483,7 +2661,13 @@ var QueryBuilder = /** @class */ (function (_super) {
                 ddlObj.dataSource = itemData.operators;
                 ddlObj.index = this.getOperatorIndex(ddlObj, rule);
                 ddlObj.value = tempRule.operator = ddlObj.dataSource[ddlObj.index].value;
-                ddlObj.dataBind();
+                if (!this.autoSelectOperator) {
+                    ddlObj.index = -1;
+                    tempRule.operator = ddlObj.value = '';
+                }
+                else {
+                    ddlObj.dataBind();
+                }
             }
         }
         var operator = tempRule.operator.toString();
@@ -2516,39 +2700,41 @@ var QueryBuilder = /** @class */ (function (_super) {
                 this.validateValue(rule, closest(target, '.e-rule-container'));
                 this.destroyControls(target);
             }
-            if (column) {
-                itemData.template = column.template;
-            }
-            if (itemData.template) {
-                addClass([target.nextElementSibling], 'e-template-value');
-                itemData.template = column.template;
-                isTempRendered = this.setColumnTemplate(itemData, parentId, column.field, itemData.value ||
-                    operator, target, rule);
-            }
-            if (isTempRendered) {
-                var parentElem = target.parentElement.querySelector('.e-rule-value');
-                if (this.element.className.indexOf('e-device') > -1 || this.displayMode === 'Vertical') {
-                    parentElem.style.width = '100%';
-                }
-                else {
-                    parentElem.style.width = '200px';
-                }
-            }
-            else {
-                removeClass([target.nextElementSibling], 'e-template-value');
-                var inputLen = 1;
-                if (tempRule.type === 'boolean') {
-                    inputLen = this.selectedColumn.values ? this.selectedColumn.values.length : 2;
+            if (this.isImportRules || (ddlObj && ddlObj.value !== '')) {
+                if (column) {
+                    itemData.template = column.template;
+                }
+                if (itemData.template) {
+                    addClass([target.nextElementSibling], 'e-template-value');
+                    itemData.template = column.template;
+                    isTempRendered = this.setColumnTemplate(itemData, parentId, column.field, itemData.value ||
+                        operator, target, rule);
+                }
+                if (isTempRendered) {
+                    var parentElem = target.parentElement.querySelector('.e-rule-value');
+                    if (this.element.className.indexOf('e-device') > -1 || this.displayMode === 'Vertical') {
+                        parentElem.style.width = '100%';
+                    }
+                    else {
+                        parentElem.style.width = '200px';
+                    }
                 }
                 else {
-                    inputLen = (operator && operator.toLowerCase().indexOf('between') > -1) ? 2 : 1;
-                }
-                for (var i = 0; i < inputLen; i++) {
-                    var valElem = this.createElement('input', { attrs: { type: 'text', id: parentId + '_valuekey' + i } });
-                    target.nextElementSibling.appendChild(valElem);
+                    removeClass([target.nextElementSibling], 'e-template-value');
+                    var inputLen = 1;
+                    if (tempRule.type === 'boolean') {
+                        inputLen = this.selectedColumn.values ? this.selectedColumn.values.length : 2;
+                    }
+                    else {
+                        inputLen = (operator && operator.toLowerCase().indexOf('between') > -1) ? 2 : 1;
+                    }
+                    for (var i = 0; i < inputLen; i++) {
+                        var valElem = this.createElement('input', { attrs: { type: 'text', id: parentId + '_valuekey' + i } });
+                        target.nextElementSibling.appendChild(valElem);
+                    }
                 }
+                this.renderControls(target, itemData, rule, tempRule, isTempRendered);
             }
-            this.renderControls(target, itemData, rule, tempRule, isTempRendered);
         }
         else {
             var parentElem = target.parentElement.querySelector('.e-rule-value');
@@ -2982,8 +3168,8 @@ var QueryBuilder = /** @class */ (function (_super) {
         var i;
         var len;
         var tooltip;
-        var popupElement;
         _super.prototype.destroy.call(this);
+        var popupElement;
         element = this.element.querySelectorAll('.e-addrulegroup');
         len = element.length;
         for (i = 0; i < len; i++) {
@@ -3069,7 +3255,8 @@ var QueryBuilder = /** @class */ (function (_super) {
             if (grouplen) {
                 this.isPublic = true;
                 for (var i = 0, len = groups.length; i < len; i++) {
-                    this.updatedRule = { 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;
@@ -3077,15 +3264,27 @@ var QueryBuilder = /** @class */ (function (_super) {
             else {
                 var condition = 'and';
                 var not = false;
+                var isLocked = false;
                 if (this.updatedRule) {
                     condition = this.updatedRule.condition;
                     not = this.updatedRule.not;
+                    isLocked = this.updatedRule.isLocked;
                 }
-                if (this.enableNotCondition) {
-                    rule.rules.push({ 'condition': condition, 'not': not, rules: [] });
+                if (this.groupIndex < 0) {
+                    if (this.enableNotCondition) {
+                        rule.rules.push({ 'condition': condition, 'not': not, rules: [] });
+                    }
+                    else {
+                        rule.rules.push({ 'condition': condition, rules: [] });
+                    }
                 }
                 else {
-                    rule.rules.push({ 'condition': condition, rules: [] });
+                    if (this.enableNotCondition) {
+                        rule.rules.splice(this.groupIndex + 1, 0, { condition: condition, not: not, rules: [], isLocked: isLocked });
+                    }
+                    else {
+                        rule.rules.splice(this.groupIndex + 1, 0, { condition: condition, rules: [], isLocked: isLocked });
+                    }
                 }
             }
             if (!this.headerTemplate) {
@@ -3268,17 +3467,53 @@ var QueryBuilder = /** @class */ (function (_super) {
                     this.refresh();
                     break;
                 case 'showButtons':
-                    if (newProp.showButtons.ruleDelete) {
-                        removeClass(this.element.querySelectorAll('.e-rule-delete'), 'e-button-hide');
+                    if (!isNullOrUndefined(newProp.showButtons.lockGroup)) {
+                        if (newProp.showButtons.lockGroup) {
+                            removeClass(this.element.querySelectorAll('.e-lock-grp-btn'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-lock-grp-btn'), 'e-button-hide');
+                        }
                     }
-                    else {
-                        addClass(this.element.querySelectorAll('.e-rule-delete'), 'e-button-hide');
+                    if (!isNullOrUndefined(newProp.showButtons.lockRule)) {
+                        if (newProp.showButtons.lockRule) {
+                            removeClass(this.element.querySelectorAll('.e-lock-rule-btn'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-lock-rule-btn'), 'e-button-hide');
+                        }
                     }
-                    if (newProp.showButtons.groupDelete) {
-                        removeClass(this.element.querySelectorAll('.e-deletegroup'), 'e-button-hide');
+                    if (!isNullOrUndefined(newProp.showButtons.cloneGroup)) {
+                        if (newProp.showButtons.cloneGroup) {
+                            removeClass(this.element.querySelectorAll('.e-clone-grp-btn'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-clone-grp-btn'), 'e-button-hide');
+                        }
                     }
-                    else {
-                        addClass(this.element.querySelectorAll('.e-deletegroup'), 'e-button-hide');
+                    if (!isNullOrUndefined(newProp.showButtons.cloneRule)) {
+                        if (newProp.showButtons.cloneRule) {
+                            removeClass(this.element.querySelectorAll('.e-clone-rule-btn'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-clone-rule-btn'), 'e-button-hide');
+                        }
+                    }
+                    if (!isNullOrUndefined(newProp.showButtons.ruleDelete)) {
+                        if (newProp.showButtons.ruleDelete) {
+                            removeClass(this.element.querySelectorAll('.e-rule-delete'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-rule-delete'), 'e-button-hide');
+                        }
+                    }
+                    if (!isNullOrUndefined(newProp.showButtons.groupDelete)) {
+                        if (newProp.showButtons.groupDelete) {
+                            removeClass(this.element.querySelectorAll('.e-deletegroup'), 'e-button-hide');
+                        }
+                        else {
+                            addClass(this.element.querySelectorAll('.e-deletegroup'), 'e-button-hide');
+                        }
                     }
                     break;
                 case 'cssClass':
@@ -3355,8 +3590,11 @@ var QueryBuilder = /** @class */ (function (_super) {
         this.element.id = this.element.id || getUniqueID('ej2-querybuilder');
         this.defaultLocale = {
             StartsWith: 'Starts With',
+            DoesNotStartWith: 'Does Not Start With',
             EndsWith: 'Ends With',
+            DoesNotEndWith: 'Does Not End With',
             Contains: 'Contains',
+            DoesNotContain: 'Does Not Contain',
             NotLike: 'Not Like',
             Like: 'Like',
             Equal: 'Equal',
@@ -3390,7 +3628,13 @@ var QueryBuilder = /** @class */ (function (_super) {
             IsNotNull: 'Is Not Null',
             True: 'true',
             False: 'false',
-            AddButton: 'Add Group/Condition'
+            AddButton: 'Add Group/Condition',
+            CloneGroup: 'Clone Group',
+            LockGroup: 'Lock Group',
+            CloneRule: 'Clone Rule',
+            LockRule: 'Lock Rule',
+            UnlockRule: 'Unlock Rule',
+            UnlockGroup: 'Unlock Group'
         };
         this.l10n = new L10n('querybuilder', this.defaultLocale, this.locale);
         this.intl = new Internationalization(this.locale);
@@ -3403,8 +3647,11 @@ var QueryBuilder = /** @class */ (function (_super) {
         this.customOperators = {
             stringOperator: [
                 { value: 'startswith', key: this.l10n.getConstant('StartsWith') },
+                { value: 'notstartswith', key: this.l10n.getConstant('DoesNotStartWith') },
                 { value: 'endswith', key: this.l10n.getConstant('EndsWith') },
+                { value: 'notendswith', key: this.l10n.getConstant('DoesNotEndWith') },
                 { value: 'contains', key: this.l10n.getConstant('Contains') },
+                { value: 'notcontains', key: this.l10n.getConstant('DoesNotContain') },
                 { value: 'equal', key: this.l10n.getConstant('Equal') },
                 { value: 'notequal', key: this.l10n.getConstant('NotEqual') },
                 { value: 'in', key: this.l10n.getConstant('In') },
@@ -3418,7 +3665,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                 { value: 'greaterthanorequal', key: this.l10n.getConstant('GreaterThanOrEqual') },
                 { value: 'lessthan', key: this.l10n.getConstant('LessThan') },
                 { value: 'lessthanorequal', key: this.l10n.getConstant('LessThanOrEqual') },
-                { value: 'notequal', key: this.l10n.getConstant('NotEqual') }
+                { value: 'notequal', key: this.l10n.getConstant('NotEqual') },
+                { value: 'between', key: this.l10n.getConstant('Between') },
+                { value: 'notbetween', key: this.l10n.getConstant('NotBetween') }
             ],
             booleanOperator: [
                 { value: 'equal', key: this.l10n.getConstant('Equal') },
@@ -3743,6 +3992,10 @@ var QueryBuilder = /** @class */ (function (_super) {
         this.setProperties({ rule: rule }, true);
         rule = this.getRuleCollection(this.rule, false);
         this.importRules(this.rule, this.element.querySelector('.e-group-container'), true, this.rule.not, isRoot);
+        if (rule.isLocked) {
+            var lockGrpTarget = this.element.querySelector('.e-group-container').querySelector('.e-lock-grp-btn');
+            this.groupLock(lockGrpTarget);
+        }
         this.isImportRules = false;
     };
     QueryBuilder.prototype.keyBoardHandler = function (e) {
@@ -3838,7 +4091,8 @@ var QueryBuilder = /** @class */ (function (_super) {
                 rule.value !== undefined)) || (customObj && customObj.isQuestion)) {
                 var condition = rule.condition;
                 rule = {
-                    'label': rule.label, 'field': rule.field, 'operator': rule.operator, 'type': rule.type, 'value': rule.value
+                    'label': rule.label, 'field': rule.field, 'operator': rule.operator, 'type': rule.type, 'value': rule.value,
+                    'isLocked': rule.isLocked
                 };
                 if (condition) {
                     rule.condition = condition;
@@ -3847,6 +4101,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     rule.custom = customObj;
                 }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if ((rule.operator === 'in' || rule.operator === 'notin') && rule.value && rule.value.length === 0) {
                     rule = {};
                 }
@@ -3872,10 +4127,10 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             else {
                 if (this.enableNotCondition) {
-                    rule = { 'condition': rule.condition, 'rules': rule.rules, 'not': rule.not };
+                    rule = { 'condition': rule.condition, 'rules': rule.rules, 'not': rule.not, 'isLocked': rule.isLocked };
                 }
                 else {
-                    rule = { 'condition': rule.condition, 'rules': rule.rules };
+                    rule = { 'condition': rule.condition, 'rules': rule.rules, 'isLocked': rule.isLocked };
                 }
                 if (customObj) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -4040,11 +4295,20 @@ var QueryBuilder = /** @class */ (function (_super) {
         var ruleValue;
         var ignoreCase = false;
         var column;
-        var ignoreOper = ['notcontains', 'notstartswith', 'notendswith'];
         if (!ruleColl) {
             return pred;
         }
         for (var i = 0, len = ruleColl.length; i < len; i++) {
+            var operator = ruleColl[i].operator;
+            if (operator === 'notstartswith') {
+                operator = 'doesnotstartwith';
+            }
+            else if (operator === 'notendswith') {
+                operator = 'doesnotendwith';
+            }
+            else if (operator === 'notcontains') {
+                operator = 'doesnotcontain';
+            }
             var keys = Object.keys(ruleColl[i]);
             ignoreCase = false;
             if (keys.indexOf('rules') > -1 && ruleColl[i].rules) {
@@ -4063,7 +4327,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                 }
             }
-            else if (!isNullOrUndefined(ruleColl[i].operator) && !isNullOrUndefined(ruleColl[i].operator.length)) {
+            else if (!isNullOrUndefined(operator) && !isNullOrUndefined(operator.length)) {
                 var oper = ruleColl[i].operator.toLowerCase();
                 var isDateFilter = false;
                 var dateOperColl = ['equal', 'notequal', 'greaterthan', 'greaterthanorequal', 'lessthan', 'lessthanorequal'];
@@ -4094,23 +4358,20 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
                 if (i === 0) {
                     if (isDateFilter || (oper.indexOf('in') > -1 || oper.indexOf('between') > -1 || oper.indexOf('null') > -1 ||
-                        oper.indexOf('empty') > -1) && oper.indexOf('contains') < 0) {
+                        oper.indexOf('empty') > -1) && (oper.indexOf('contain') < 0)) {
                         pred = isDateFilter ? this.datePredicate(ruleColl[i], ruleValue) :
                             this.arrayPredicate(ruleColl[i]);
                     }
                     else {
                         var value = ruleValue;
-                        if (value !== '' && ignoreOper.indexOf(oper) < 0) {
-                            pred = new Predicate(ruleColl[i].field, ruleColl[i].operator, ruleValue, ignoreCase);
+                        if (value !== '') {
+                            pred = new Predicate(ruleColl[i].field, operator, ruleValue, ignoreCase);
                         }
                     }
                 }
                 else {
-                    if (ignoreOper.indexOf(oper) > -1) {
-                        continue;
-                    }
                     if (isDateFilter || (oper.indexOf('in') > -1 || oper.indexOf('between') > -1 ||
-                        oper.indexOf('null') > -1 || oper.indexOf('empty') > -1) && oper.indexOf('contains') < 0) {
+                        oper.indexOf('null') > -1 || oper.indexOf('empty') > -1) && oper.indexOf('contain') < 0) {
                         pred = isDateFilter ? this.datePredicate(ruleColl[i], ruleValue, pred, rule.condition) :
                             this.arrayPredicate(ruleColl[i], pred, rule.condition);
                     }
@@ -4119,19 +4380,19 @@ var QueryBuilder = /** @class */ (function (_super) {
                             var value = ruleValue;
                             if (pred && value !== '') {
                                 pred
-                                    = pred.and(ruleColl[i].field, ruleColl[i].operator, ruleValue, ignoreCase);
+                                    = pred.and(ruleColl[i].field, operator, ruleValue, ignoreCase);
                             }
                             else if (value !== '') {
-                                pred = new Predicate(ruleColl[i].field, ruleColl[i].operator, ruleValue, ignoreCase);
+                                pred = new Predicate(ruleColl[i].field, operator, ruleValue, ignoreCase);
                             }
                         }
                         else {
                             var value = ruleValue;
                             if (pred && value !== '') {
-                                pred = pred.or(ruleColl[i].field, ruleColl[i].operator, ruleValue, ignoreCase);
+                                pred = pred.or(ruleColl[i].field, operator, ruleValue, ignoreCase);
                             }
                             else if (value !== '') {
-                                pred = new Predicate(ruleColl[i].field, ruleColl[i].operator, ruleValue, ignoreCase);
+                                pred = new Predicate(ruleColl[i].field, operator, ruleValue, ignoreCase);
                             }
                         }
                     }
@@ -4411,15 +4672,28 @@ var QueryBuilder = /** @class */ (function (_super) {
             for (var i = 0, len = ruleColl.length; i < len; i++) {
                 var keys = Object.keys(ruleColl[i]);
                 if (!isNullOrUndefined(ruleColl[i].rules) && keys.indexOf('rules') > -1 && (ruleColl[i].rules.length !== 0)) {
+                    if (this.element.querySelectorAll('.e-group-container').length > this.maxGroupCount) {
+                        return null;
+                    }
                     parentElem = this.renderGroup(ruleColl[i], ruleColl[i].condition, parentElem, ruleColl[i].not);
                     parentElem = this.importRules(ruleColl[i], parentElem, true);
                 }
                 else {
                     this.renderRule(ruleColl[i], parentElem);
                 }
+                if (!isNullOrUndefined(ruleColl[i].rules) && ruleColl[i].isLocked) {
+                    var lockGrpTarget = parentElem.querySelector('.e-rule-list').children[i].querySelector('.e-lock-grp-btn');
+                    this.groupLock(lockGrpTarget);
+                }
+                if (isNullOrUndefined(ruleColl[i].rules) && ruleColl[i].isLocked) {
+                    var lockRuleTarget = parentElem.querySelector('.e-rule-list').children[i].querySelector('.e-lock-rule-btn');
+                    this.ruleLock(lockRuleTarget);
+                }
             }
         }
-        parentElem = closest(parentElem, '.e-rule-list');
+        if (parentElem) {
+            parentElem = closest(parentElem, '.e-rule-list');
+        }
         if (parentElem) {
             parentElem = closest(parentElem, '.e-group-container');
         }
@@ -4428,7 +4702,20 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.renderGroup = function (rule, condition, parentElem, not, isRoot) {
         this.addGroupElement(true, parentElem, condition, false, not, isRoot, rule); //Child group
         var element = parentElem.querySelectorAll('.e-group-container');
-        return element[element.length - 1];
+        var cloneElem = parentElem.querySelector('.e-rule-list').children;
+        if (this.showButtons.cloneGroup && this.cloneGrpBtnClick && this.isMiddleGroup) {
+            this.isMiddleGroup = false;
+            this.cloneGrpBtnClick = false;
+            return cloneElem[this.groupIndex + 1]; // group added in the middle
+        }
+        else if (this.showButtons.cloneGroup && this.cloneGrpBtnClick && this.isLastGroup) {
+            this.isLastGroup = false;
+            this.cloneGrpBtnClick = false;
+            return cloneElem[cloneElem.length - 1]; // group added in the end
+        }
+        else {
+            return element[element.length - 1];
+        }
     };
     QueryBuilder.prototype.renderRule = function (rule, parentElem) {
         if (parentElem.className.indexOf('e-group-container') > -1) {
@@ -4627,15 +4914,19 @@ var QueryBuilder = /** @class */ (function (_super) {
                             valueStr += rule.value ? '("%' + rule.value + '%")' : '(' + rule.value + ')';
                         }
                         else {
-                            if (rule.type === 'number' || typeof rule.value === 'boolean' || rule.value === null) {
+                            if (rule.type === 'number' || typeof rule.value === 'boolean' ||
+                                (rule.value === null && (rule.operator.toString().indexOf('empty') < -1))) {
                                 valueStr += rule.value;
                             }
+                            else if (rule.operator.toString().indexOf('empty') > -1) {
+                                valueStr += '""';
+                            }
                             else {
                                 valueStr += '"' + rule.value + '"';
                             }
                         }
                     }
-                    if (rule.operator.toString().indexOf('null') > -1 || (rule.operator.toString().indexOf('empty') > -1)) {
+                    if (rule.operator.toString().indexOf('null') > -1) {
                         if (enableEscape) {
                             rule.field = '`' + rule.field + '`';
                         }
@@ -4647,6 +4938,13 @@ var QueryBuilder = /** @class */ (function (_super) {
                         queryStr += rule.field + ' ' + ruleOpertor;
                     }
                     else {
+                        var custOper = ruleOpertor;
+                        if (rule.operator === 'isempty') {
+                            custOper = '=';
+                        }
+                        else if (rule.operator === 'isnotempty') {
+                            custOper = '!=';
+                        }
                         if (enableEscape) {
                             rule.field = '`' + rule.field + '`';
                         }
@@ -4655,7 +4953,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                                 rule.field = '"' + rule.field + '"';
                             }
                         }
-                        queryStr += rule.field + ' ' + ruleOpertor + ' ' + valueStr;
+                        queryStr += rule.field + ' ' + custOper + ' ' + valueStr;
                     }
                     if (rule.condition && rule.condition !== '') {
                         condition = rule.condition;
@@ -4685,7 +4983,7 @@ var QueryBuilder = /** @class */ (function (_super) {
      * Sets the rules from the sql query.
      *
      * @param {string} sqlString - 'sql String' to be passed to set the rule.
-     * @param {boolean} sqlLocale -  Set `true` if Localization for Sql query.
+     * @param {boolean} sqlLocale - Optional. Set `true` if Localization for Sql query.
      * @returns {void}
      */
     QueryBuilder.prototype.setRulesFromSql = function (sqlString, sqlLocale) {
@@ -4717,15 +5015,173 @@ var QueryBuilder = /** @class */ (function (_super) {
      *
      * @param {RuleModel} rule - 'rule' to be passed to get the sql.
      * @param {boolean} allowEscape - Set `true` if it exclude the escape character.
-     *  @param {boolean} sqlLocale - Set `true` if Localization for Sql query.
-     * @returns {object} - Sql query from rules.
+     * @param {boolean} sqlLocale - Set `true` if Localization for Sql query.
+     * @returns {string} - Sql query from rules.
      */
     QueryBuilder.prototype.getSqlFromRules = function (rule, allowEscape, sqlLocale) {
         if (!rule) {
             rule = this.getValidRules();
         }
         rule = this.getRuleCollection(rule, false);
-        return this.getSqlString(this.getValidRules(rule), allowEscape, null, sqlLocale).replace(/"/g, '\'');
+        var sqlString = this.getSqlString(this.getValidRules(rule), allowEscape, null, sqlLocale).replace(/"/g, '\'');
+        return sqlString;
+    };
+    /**
+     * Gets the parameter SQL query from rules.
+     *
+     * @param {RuleModel} rule – Specify the rule to be passed to get the parameter sql string.
+     * @returns {ParameterizedSql} – Parameterized SQL query from rules.
+     */
+    QueryBuilder.prototype.getParameterizedSql = function (rule) {
+        if (!rule) {
+            rule = this.getValidRules();
+        }
+        var obj = { sql: null };
+        this.notify('query-library', { prop: 'getParameterSql', onPropertyChange: false, value: { rule: rule, obj: obj } });
+        return obj['sql'];
+    };
+    /**
+     * Sets the rules from the parameter sql query.
+     *
+     * @param { ParameterizedSql} sqlQuery – Specifies the parameter SQL to be passed to set the rule and load it to the query builder.
+     * @returns {void}
+     */
+    QueryBuilder.prototype.setParameterizedSql = function (sqlQuery) {
+        var obj = { sql: null };
+        this.notify('query-library', { prop: 'convertParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
+        var sql = obj['sql'];
+        if (sql) {
+            sql = sql.replace(/`/g, '');
+            var ruleModel = this.getRulesFromSql(sql);
+            this.setRules({ condition: ruleModel.condition, not: ruleModel.not, rules: ruleModel.rules });
+        }
+    };
+    /**
+     * Gets the named parameter SQL query from rules.
+     *
+     * @param {RuleModel} rule – Specify the rule to be passed to get the named parameter SQL string.
+     * @returns {ParameterizedNamedSql} – Parameterized Named SQL query from rules.
+     */
+    QueryBuilder.prototype.getParameterizedNamedSql = function (rule) {
+        if (!rule) {
+            rule = this.getValidRules();
+        }
+        var obj = { sql: null };
+        this.notify('query-library', { prop: 'getNamedParameterSql', onPropertyChange: false, value: { rule: rule, obj: obj } });
+        return obj['sql'];
+    };
+    /**
+     * Sets the rules from the named parameter SQL query.
+     *
+     * @param { ParameterizedNamedSql } sqlQuery – Specifies the named parameter SQL to be passed to set the rule and load it to the query builder.
+     * @returns {void}
+     */
+    QueryBuilder.prototype.setParameterizedNamedSql = function (sqlQuery) {
+        var obj = { sql: null };
+        this.notify('query-library', { prop: 'convertNamedParamSqlToSql', onPropertyChange: false, value: { sql: sqlQuery, obj: obj } });
+        var sql = obj['sql'];
+        if (sql) {
+            sql = sql.replace(/`/g, '');
+            var ruleModel = this.getRulesFromSql(sql);
+            this.setRules({ condition: ruleModel.condition, not: ruleModel.not, rules: ruleModel.rules });
+        }
+    };
+    /**
+     * Set the rules from Mongo query.
+     *
+     * @param {string} mongoQuery - 'sql String' to be passed to get the rule.
+     * @param {boolean} mongoLocale - Set `true` if Localization for Mongo query.
+     * @returns {void}
+     */
+    QueryBuilder.prototype.setMongoQuery = function (mongoQuery, mongoLocale) {
+        this.rule = { condition: 'and', not: false, rules: [] };
+        this.notify('query-library', { prop: 'mongoParser', onPropertyChange: false, value: { mongoQuery: JSON.parse(mongoQuery), rule: this.rule, mongoLocale: mongoLocale } });
+    };
+    /**
+     * Gets the Mongo query from rules.
+     *
+     * @param {RuleModel} rule - 'rule' to be passed to get the sql.
+     * @returns {object} - Sql query from rules.
+     */
+    QueryBuilder.prototype.getMongoQuery = function (rule) {
+        if (!rule) {
+            rule = this.getValidRules();
+        }
+        var obj = { mongoQuery: null };
+        this.notify('query-library', { prop: 'getMongoFromRules', onPropertyChange: false, value: { rule: rule, mongoQuery: '', obj: obj } });
+        return obj['mongoQuery'];
+    };
+    /**
+     * Clones the rule based on the rule ID to the specific group.
+     *
+     * @param {string} ruleID - Specifies the ruleID that needs to be cloned.
+     * @param {string} groupID - Specifies the groupID in which the rule to be cloned.
+     * @param {number} index - Specifies the index to insert the cloned rule inside the group.
+     * @returns {void}
+     */
+    QueryBuilder.prototype.cloneRule = function (ruleID, groupID, index) {
+        var getRule = this.getRule(ruleID.replace(this.element.id + '_', ''));
+        var isCloneRule = this.showButtons.cloneRule;
+        groupID = groupID.replace(this.element.id + '_', '');
+        this.ruleIndex = index;
+        this.cloneRuleBtnClick = true;
+        this.showButtons.cloneRule = true;
+        this.addRules([{
+                'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
+                'value': getRule.value
+            }], groupID);
+        this.ruleIndex = -1;
+        this.cloneRuleBtnClick = false;
+        this.showButtons.cloneRule = isCloneRule;
+        isCloneRule = false;
+    };
+    /**
+     * Clones the group based on the group ID to the specific group.
+     *
+     * @param {string} groupID - Specifies the groupID that needs to be cloned.
+     * @param {string} parentGroupID - Specifies the parentGroupID in which the group to be cloned.
+     * @param {number} index - Specifies the index to insert the cloned group inside the parent group.
+     * @returns {void}
+     */
+    QueryBuilder.prototype.cloneGroup = function (groupID, parentGroupID, index) {
+        parentGroupID = parentGroupID.replace(this.element.id + '_', '');
+        var group = this.getGroup(parentGroupID);
+        var isCloneGroup = this.showButtons.cloneGroup;
+        groupID = groupID.replace(this.element.id + '_', '');
+        this.groupIndex = index;
+        this.cloneGrpBtnClick = true;
+        this.showButtons.cloneGroup = true;
+        this.addGroups([{ 'condition': group.condition, 'not': group.not, 'rules': group.rules }], groupID);
+        this.groupIndex = -1;
+        this.cloneGrpBtnClick = false;
+        this.showButtons.cloneGroup = isCloneGroup;
+        isCloneGroup = false;
+    };
+    /**
+     * Locks the rule based on the rule ID.
+     *
+     * @param {string} ruleID - Specifies the ruleID that needs to be locked.
+     * @returns {void}
+     */
+    QueryBuilder.prototype.lockRule = function (ruleID) {
+        if (ruleID.indexOf(this.element.id) < 0) {
+            ruleID = this.element.id + '_' + ruleID;
+        }
+        var target = document.getElementById(ruleID).querySelectorAll('.e-lock-rule-btn')[0];
+        this.ruleLock(target);
+    };
+    /**
+     * Locks the group based on the group ID
+     *
+     * @param {string} groupID - Specifies the groupID that needs to be locked.
+     * @returns {void}
+     */
+    QueryBuilder.prototype.lockGroup = function (groupID) {
+        if (groupID.indexOf(this.element.id) < 0) {
+            groupID = this.element.id + '_' + groupID;
+        }
+        var target = document.getElementById(groupID).querySelectorAll('.e-lock-grp-btn')[0];
+        this.groupLock(target);
     };
     QueryBuilder.prototype.sqlParser = function (sqlString, sqlLocale) {
         var st = 0;
@@ -4927,13 +5383,13 @@ var QueryBuilder = /** @class */ (function (_super) {
             for (var i = 0; i < localeOperator.length; i++) {
                 if (this.sqlOperators[localeOperator[i]] === operator.toUpperCase()) {
                     if (value && value.indexOf('%') === 0 && value[value.length - 1] === '%') {
-                        return (localeOperator[i] === 'notcontains') ? 'notcontains' : 'contains';
+                        return (operator.toUpperCase() === 'NOT LIKE') ? 'notcontains' : 'contains';
                     }
                     else if (value && value.indexOf('%') !== 0 && value.indexOf('%') === value.length - 1) {
-                        return (localeOperator[i] === 'notstartswith') ? 'notstartswith' : 'startswith';
+                        return (operator.toUpperCase() === 'NOT LIKE') ? 'notstartswith' : 'startswith';
                     }
                     else if (value && value.indexOf('%') === 0 && value.indexOf('%') !== value.length - 1) {
-                        return (localeOperator[i] === 'notendswith') ? 'notendswith' : 'endswith';
+                        return (operator.toUpperCase() === 'NOT LIKE') ? 'notendswith' : 'endswith';
                     }
                     return localeOperator[i];
                 }
@@ -5118,6 +5574,15 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
                 else if (parser[i + 1][0] === 'Operators') {
                     rule.operator = this.getOperator(parser[i + 2][1], parser[i + 1][1], sqlLocale);
+                    var isEmptyOper = false;
+                    if (rule.operator == "equal" && parser[i + 2][0] === "String" && parser[i + 2][1] === "''") {
+                        rule.operator = "isempty";
+                        isEmptyOper = true;
+                    }
+                    else if (rule.operator == "notequal" && parser[i + 2][0] === "String" && parser[i + 2][1] === "''") {
+                        rule.operator = "isnotempty";
+                        isEmptyOper = true;
+                    }
                     if (parser[i + 2][0] === 'Number') {
                         rule.type = 'number';
                         rule.value = Number(parser[i + 2][1]);
@@ -5174,6 +5639,301 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         return rules;
     };
+    /**
+     * Clone the Group
+     *
+     * @param {Element | string} target - 'target' to be passed to clone the group.
+     * @returns {void}
+     */
+    QueryBuilder.prototype.groupClone = function (target) {
+        var groupElem = target.closest('.e-rule-list').closest('.e-group-container');
+        var targetGrpId;
+        var groupId;
+        if (typeof target === 'string') {
+            groupId = this.element.id + '_' + target;
+            target = document.getElementById(groupId);
+        }
+        else {
+            targetGrpId = target.id.replace(this.element.id + '_', '');
+            groupId = groupElem.id.replace(this.element.id + '_', '');
+        }
+        var group = this.getGroup(targetGrpId);
+        this.groupIndex = Array.prototype.indexOf.call(target.closest('.e-rule-list').children, target.closest('.e-group-container'));
+        this.addGroups([{ 'condition': group.condition, 'not': group.not, 'rules': group.rules }], groupId);
+        this.groupIndex = -1;
+    };
+    QueryBuilder.prototype.ruleClone = function (target) {
+        var ruleElem = closest(target, '.e-rule-container');
+        var groupElem = target.closest('.e-rule-list').closest('.e-group-container');
+        var getRule = this.getRule(target);
+        var groupId = groupElem.id.replace(this.element.id + '_', '');
+        var ruleElemColl = groupElem.querySelectorAll('.e-rule-container');
+        for (var i = 0, iLen = ruleElemColl.length; i < iLen; i++) {
+            if (ruleElem.id === ruleElemColl[i].id) {
+                this.ruleIndex = i;
+            }
+        }
+        this.addRules([{ 'label': getRule.label, 'field': getRule.field, 'type': getRule.type, 'operator': getRule.operator,
+                'value': getRule.value }], groupId);
+        this.ruleIndex = -1;
+    };
+    QueryBuilder.prototype.ruleLock = function (target) {
+        var ruleElem = closest(target, '.e-rule-container');
+        var rule = this.getRule(ruleElem.id.replace(this.element.id + '_', ''));
+        if (ruleElem.classList.contains('e-disable')) {
+            rule.isLocked = false;
+            this.lockItems = this.lockItems.filter(function (lockItem) { return lockItem !== ruleElem.id; });
+            ruleElem.classList.remove('e-disable');
+            this.disableRuleControls(target, ruleElem, false);
+            target.children[0].classList.add('e-unlock');
+            target.children[0].classList.remove('e-lock');
+            target.setAttribute('title', this.l10n.getConstant('LockRule'));
+        }
+        else {
+            rule.isLocked = true;
+            if (this.lockItems.indexOf(ruleElem.id) < 0) {
+                this.lockItems.splice(this.lockItems.length - 1, 0, ruleElem.id);
+            }
+            ruleElem.classList.add('e-disable');
+            this.disableRuleControls(target, ruleElem, true);
+            target.children[0].classList.add('e-lock');
+            target.children[0].classList.remove('e-unlock');
+            target.setAttribute('title', this.l10n.getConstant('UnlockRule'));
+        }
+    };
+    QueryBuilder.prototype.groupLock = function (target) {
+        var groupElem = closest(target, '.e-group-container');
+        var group = this.getGroup(groupElem.id.replace(this.element.id + '_', ''));
+        var isRoot = groupElem.id.indexOf('group0') > -1;
+        if (groupElem.classList.contains('e-disable')) {
+            if (isRoot) {
+                var newGroup = {};
+                newGroup.condition = group.condition;
+                newGroup.not = group.not;
+                newGroup.isLocked = false;
+                this.setProperties({ rule: newGroup }, true);
+            }
+            else {
+                group.isLocked = false;
+            }
+            this.lockItems = this.lockItems.filter(function (lockItem) { return lockItem !== groupElem.id; });
+            groupElem.classList.remove('e-disable');
+            this.disableHeaderControls(target, groupElem, false);
+            target.children[0].classList.add('e-unlock');
+            target.children[0].classList.remove('e-lock');
+            target.setAttribute('title', this.l10n.getConstant('LockGroup'));
+            this.updateLockItems();
+        }
+        else {
+            if (isRoot) {
+                var newGroup = {};
+                newGroup.condition = group.condition;
+                newGroup.not = group.not;
+                newGroup.isLocked = true;
+                this.setProperties({ rule: newGroup }, true);
+            }
+            else {
+                group.isLocked = true;
+            }
+            if (this.lockItems.indexOf(groupElem.id) < 0) {
+                this.lockItems.splice(this.lockItems.length - 1, 0, groupElem.id);
+            }
+            groupElem.classList.add('e-disable');
+            this.disableHeaderControls(target, groupElem, true);
+            target.children[0].classList.add('e-lock');
+            target.children[0].classList.remove('e-unlock');
+            target.setAttribute('title', this.l10n.getConstant('UnlockGroup'));
+        }
+    };
+    QueryBuilder.prototype.updateLockItems = function () {
+        for (var i = 0; i < this.lockItems.length; i++) {
+            var idColl = this.lockItems[i].split('_');
+            if (idColl.length > 2) {
+                var ruleElem = this.element.querySelector('#' + this.lockItems[i]);
+                var target = ruleElem.querySelector('.e-lock-rule-btn');
+                ruleElem = closest(target, '.e-rule-container');
+                if (!ruleElem.classList.contains('e-disable')) {
+                    this.ruleLock(target);
+                }
+            }
+            else {
+                var groupElem = this.element.querySelector('#' + this.lockItems[i]);
+                var target = groupElem.querySelector('.e-lock-grp-btn');
+                groupElem = closest(target, '.e-group-container');
+                if (!groupElem.classList.contains('e-disable')) {
+                    this.groupLock(target);
+                }
+            }
+        }
+    };
+    QueryBuilder.prototype.disableHeaderControls = function (target, groupElem, isDisabled) {
+        var andElem = groupElem.querySelectorAll('.e-btngroup-and');
+        var orElem = groupElem.querySelectorAll('.e-btngroup-or');
+        var notElem = groupElem.querySelectorAll('.e-qb-toggle');
+        var addElem = groupElem.querySelectorAll('.e-add-btn');
+        var deleteGrpElem = groupElem.querySelectorAll('.e-deletegroup');
+        var lockElem = groupElem.querySelectorAll('.e-lock-grp-btn');
+        var cloneElem = groupElem.querySelectorAll('.e-clone-grp-btn');
+        var groupContElem = groupElem.querySelectorAll('.e-group-container');
+        for (var i = 0; i < andElem.length; i++) {
+            if (isDisabled) {
+                if (groupContElem[i] && groupContElem[i].classList.contains('e-disable')) {
+                    groupContElem[i].classList.add('e-disable');
+                }
+                andElem[i].disabled = true;
+                orElem[i].disabled = true;
+                addElem[i].disabled = true;
+                if (notElem[i]) {
+                    notElem[i].disabled = true;
+                }
+                if (deleteGrpElem[i]) {
+                    deleteGrpElem[i].disabled = true;
+                }
+                if (cloneElem[i]) {
+                    cloneElem[i].disabled = true;
+                }
+                andElem[i].parentElement.classList.add('e-disabled');
+                if (lockElem[i] !== target) {
+                    lockElem[i].disabled = true;
+                    lockElem[i].children[0].classList.remove('e-unlock');
+                    lockElem[i].children[0].classList.add('e-lock');
+                }
+            }
+            else {
+                if (groupContElem[i]) {
+                    groupContElem[i].classList.remove('e-disable');
+                }
+                andElem[i].disabled = false;
+                orElem[i].disabled = false;
+                addElem[i].disabled = false;
+                lockElem[i].disabled = false;
+                if (notElem[i]) {
+                    notElem[i].disabled = false;
+                }
+                if (deleteGrpElem[i]) {
+                    deleteGrpElem[i].disabled = false;
+                }
+                if (cloneElem[i]) {
+                    cloneElem[i].disabled = false;
+                }
+                andElem[i].parentElement.classList.remove('e-disabled');
+                lockElem[i].children[0].classList.remove('e-lock');
+                lockElem[i].children[0].classList.add('e-unlock');
+            }
+        }
+        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++) {
+            if (isDisabled) {
+                if (ruleElem[i] && ruleElem[i].classList.contains('e-disable')) {
+                    ruleElem[i].classList.add('e-disable');
+                }
+                deleteElem[i].disabled = true;
+                if (cloneElem[i]) {
+                    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');
+                }
+            }
+            else {
+                if (ruleElem[i]) {
+                    ruleElem[i].classList.remove('e-disable');
+                }
+                if (cloneElem[i]) {
+                    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;
+            }
+        }
+        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;
+            }
+        }
+    };
     __decorate([
         Event()
     ], QueryBuilder.prototype, "created", void 0);
@@ -5193,7 +5953,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         Event()
     ], QueryBuilder.prototype, "ruleChange", void 0);
     __decorate([
-        Property({ ruleDelete: true, groupInsert: true, groupDelete: true })
+        Complex({}, ShowButtons)
     ], QueryBuilder.prototype, "showButtons", void 0);
     __decorate([
         Property(false)
@@ -5255,6 +6015,15 @@ var QueryBuilder = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], QueryBuilder.prototype, "readonly", void 0);
+    __decorate([
+        Property(true)
+    ], QueryBuilder.prototype, "addRuleToNewGroups", void 0);
+    __decorate([
+        Property(false)
+    ], QueryBuilder.prototype, "autoSelectField", void 0);
+    __decorate([
+        Property(true)
+    ], QueryBuilder.prototype, "autoSelectOperator", void 0);
     __decorate([
         Property('')
     ], QueryBuilder.prototype, "separator", void 0);