@syncfusion/ej2-querybuilder 19.4.56 → 20.1.51

package/dist/es6/ej2-querybuilder.es2015.js

@@ -283,7 +283,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     updateSubFieldsFromColumns(col, field) {
         for (let i = 0; i < col.length; i++) {
-            if (this.separator != '' && col[i].field.indexOf(this.separator) < 0) {
+            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) {
@@ -505,6 +505,9 @@ let QueryBuilder = class QueryBuilder extends Component {
             let template;
             args.fields = this.fields;
             args.columns = this.columns;
+            if (rule.field === '') {
+                rule.field = column.field;
+            }
             args.operators = this.getOperators(rule.field);
             args.operatorFields = { text: 'key', value: 'value' };
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -628,7 +631,6 @@ let QueryBuilder = class QueryBuilder extends Component {
                     }
                 }
                 else {
-                    let dropdowntree;
                     let ddlField;
                     const ddlValue = this.isImportRules ? rule.field : rule.field;
                     ddlField = {
@@ -642,11 +644,13 @@ let QueryBuilder = class QueryBuilder extends Component {
                     if (this.fieldModel) {
                         ddlField = Object.assign({}, ddlField, this.fieldModel);
                     }
-                    dropdowntree = new DropDownTree(ddlField);
+                    const dropdowntree = new DropDownTree(ddlField);
                     dropdowntree.appendTo('#' + ruleElem.id + '_filterkey');
                     if (!isNullOrUndefined(dropdowntree.value)) {
-                        dropdowntree.element.value = dropdowntree.value[0];
+                        const value = this.getLabelFromColumn(dropdowntree.value[0]);
+                        dropdowntree.element.value = value;
                     }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const ddlVal = this.isImportRules ?
                         this.GetRootColumnName(rule.field) : dropdowntree.value;
                     this.selectedColumn = this.getColumn(ddlVal);
@@ -681,17 +685,20 @@ let QueryBuilder = class QueryBuilder extends Component {
         else {
             groupElem = closest(target, '.e-group-container');
             rules = this.getParentGroup(groupElem);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const 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;
                 }
             }
             else {
                 if (custom) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     newRule.custom = custom;
                 }
                 rules.rules.push(newRule);
@@ -758,17 +765,17 @@ let QueryBuilder = class QueryBuilder extends Component {
                     }
                 }
                 else {
-                    dropDownObj = getComponent(ruleElemCln[i].querySelector('.e-rule-field input.e-control'), 'dropdownlist');
+                    dropDownObj = getComponent(ruleElemCln[i].querySelector('.e-rule-field .e-control'), 'dropdownlist');
                     this.selectedColumn = dropDownObj.getDataByValue(dropDownObj.value);
                     validateRule = !isNullOrUndefined(dropDownObj.index) && this.selectedColumn.validation;
                 }
-                fieldElem = tempElem.querySelector('.e-rule-field input.e-control');
+                fieldElem = tempElem.querySelector('.e-rule-field .e-control');
                 if (validateRule && validateRule.isRequired) {
                     while (indexElem && indexElem.previousElementSibling !== null) {
                         indexElem = indexElem.previousElementSibling;
                         index++;
                     }
-                    fieldElem = tempElem.querySelector('.e-rule-operator input.e-control');
+                    fieldElem = tempElem.querySelector('.e-rule-operator .e-control');
                     if (!rule.rules[index].operator) {
                         if (fieldElem.parentElement.className.indexOf('e-tooltip') < 0) {
                             this.renderToolTip(fieldElem.parentElement);
@@ -781,7 +788,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     if (excludeOprs.indexOf(rule.rules[index].operator) < 0 && (isNullOrUndefined(rule.rules[index].value) &&
                         rule.rules[index].type !== 'date') || rule.rules[index].value === '' ||
                         (rule.rules[index].value instanceof Array && valArray.length < 1)) {
-                        const valElem = tempElem.querySelectorAll('.e-rule-value input.e-control');
+                        const valElem = tempElem.querySelectorAll('.e-rule-value .e-control');
                         isValid = false;
                         for (let j = 0, jLen = valElem.length; j < jLen; j++) {
                             const element = valElem[j];
@@ -1303,7 +1310,8 @@ let QueryBuilder = class QueryBuilder extends Component {
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             ddt.value = args.value[0];
                             ddt.dataBind();
-                            ddtElem.value = args.value[0];
+                            const result = this.getLabelFromColumn(args.value[0]);
+                            ddtElem.value = result;
                         }
                     }
                 }
@@ -1333,7 +1341,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     changeRule(rule, ddlArgs) {
         if (!ddlArgs.itemData) {
-            if (this.fieldMode === "DropdownTree") {
+            if (this.fieldMode === 'DropdownTree') {
                 const ddt = getComponent(ddlArgs.element, 'dropdowntree');
                 if (ddt.value == null) {
                     return;
@@ -1356,6 +1364,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     changeFilter(flt, dl, grID, rl, tmpRl, dArg) {
         if (flt) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             let ddlValue;
             if (this.fieldMode === 'DropdownTree') {
                 ddlValue = (dl.value[0]);
@@ -1382,7 +1391,9 @@ let QueryBuilder = class QueryBuilder extends Component {
             this.changeOperator(flt, operatorElem, dl, grID, rl, tmpRl, dArg);
         }
     }
-    changeOperator(flt, opr, dl, grID, rl, tmpRl, dArg) {
+    changeOperator(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    flt, opr, dl, grID, rl, tmpRl, dArg) {
         let ruleElem;
         let ruleID;
         let eventsArgs;
@@ -1763,14 +1774,15 @@ let QueryBuilder = class QueryBuilder extends Component {
         const original = {};
         const result = [];
         let nest = [];
-        let value = "";
-        let isNested = field.indexOf(this.separator);
+        let value = '';
+        const isNested = field.indexOf(this.separator);
         for (let i = 0, iLen = dataSource.length; i < iLen; i++) {
             if (isNested === 0) {
                 value = dataSource[i][field];
             }
             else {
                 nest = field.split(this.separator);
+                // eslint-disable-next-line @typescript-eslint/tslint/config
                 nest.forEach(element => {
                     if (value) {
                         value = value[element];
@@ -1813,9 +1825,9 @@ let QueryBuilder = class QueryBuilder extends Component {
             isValues = true;
         }
         let fieldValue = this.selectedRule.field;
-        let isNested = this.selectedRule.field.indexOf(this.separator);
-        if (isNested !== 0 && this.fieldMode !== "DropdownTree") {
-            let nest = this.selectedRule.field.split(this.separator);
+        const isNested = this.selectedRule.field.indexOf(this.separator);
+        if (isNested !== 0 && this.fieldMode !== 'DropdownTree') {
+            const nest = this.selectedRule.field.split(this.separator);
             fieldValue = nest[nest.length - 1];
         }
         let multiSelectValue;
@@ -1925,10 +1937,10 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     getItemData(parentId) {
         let fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdownlist');
-        if (this.fieldMode === "DropdownTree") {
+        if (this.fieldMode === 'DropdownTree') {
             fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdowntree');
         }
-        return this.fieldMode === "DropdownTree" ? this.getColumn(fieldObj.value[0]) : this.getColumn(fieldObj.value);
+        return this.fieldMode === 'DropdownTree' ? this.getColumn(fieldObj.value[0]) : this.getColumn(fieldObj.value);
     }
     setDefaultValue(parentId, isArryValue, isNumber) {
         const itemData = this.getItemData(parentId);
@@ -2259,6 +2271,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     }
     getPreviousItemData(prevItemData, column) {
         if (this.isFieldClose && prevItemData) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             prevItemData = this.getColumn(prevItemData.value);
         }
         if (column.template && prevItemData && Object.keys(prevItemData).length < 4) {
@@ -2271,7 +2284,8 @@ let QueryBuilder = class QueryBuilder extends Component {
         const filtElem = subFldElem.getElementsByTagName('input')[0];
         const filtObj = this.fieldMode === 'DropdownTree' ? getComponent(filtElem, 'dropdowntree')
             : getComponent(filtElem, 'dropdownlist');
-        let column = this.fieldMode === 'DropdownTree' ? this.getColumn(filtObj.value[0])
+        const column = this.fieldMode === 'DropdownTree' ? this.getColumn(filtObj.value[0])
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             : this.getColumn(filtObj.value);
         this.selectedRule = column;
         if (isRender) {
@@ -2515,7 +2529,9 @@ let QueryBuilder = class QueryBuilder extends Component {
             }
             dropDownObj = this.fieldMode === 'DropdownTree' ? getComponent(target, 'dropdowntree') :
                 getComponent(target, 'dropdownlist');
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const column = this.fieldMode === 'DropdownTree' ? this.getColumn(dropDownObj.value[0])
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 : this.getColumn(dropDownObj.value);
             if (!this.isImportRules && rule.rules[index].field && rule.rules[index].field.toLowerCase() !== column.field.toLowerCase()) {
                 if (!(ruleElem.querySelectorAll('.e-template')) && !(operator.indexOf('null') > -1)
@@ -3252,6 +3268,9 @@ let QueryBuilder = class QueryBuilder extends Component {
                 if (document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
+                else {
+                    return compile(template);
+                }
             }
             catch (error) {
                 return compile(template);
@@ -3445,11 +3464,13 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
             }
             const isTemplateRendered = clnruleElem.querySelector('.e-template-value');
+            // eslint-disable
             try {
                 detach(clnruleElem);
             }
             catch (err) {
             }
+            // eslint-enable
             if (column && column.ruleTemplate) {
                 this.clearQBTemplate([clnruleElem.id]);
             }
@@ -3858,6 +3879,11 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
             }
         }
+        if (this.dataSource instanceof DataManager) {
+            if (!isNullOrUndefined(pred) && (pred.operator === 'isnull' || pred.operator === 'notnull')) {
+                pred.operator = pred.operator === 'isnull' ? 'equal' : 'notequal';
+            }
+        }
         return pred;
     }
     getLocale() {
@@ -4118,7 +4144,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 }
             }
         }
-        if (rule.rules.length === 0) {
+        if (rule.rules.length === 0 && this.headerTemplate) {
             rule.rules[0] = { 'label': '', 'field': '', 'operator': '', 'type': '', 'value': '' };
         }
         const ruleColl = rule.rules;
@@ -4361,7 +4387,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                     }
                     queryStr += rule.field + ' ' + this.operators[rule.operator] + ' ' + valueStr;
                 }
-                if (rule.condition && rule.condition != '') {
+                if (rule.condition && rule.condition !== '') {
                     condition = rule.condition;
                 }
             }
@@ -4502,7 +4528,6 @@ let QueryBuilder = class QueryBuilder extends Component {
             this.parser.push(['Literal', matchValue]);
             return matchValue.length + 2;
         }
-        // eslint-disable-next-line
         if (this.checkNumberLiteral(sqlString)) {
             matchValue = /^[0-9]+(\.[0-9]+)?/.exec(sqlString)[0];
             this.parser.push(['Literal', matchValue]);
@@ -4597,6 +4622,37 @@ let QueryBuilder = class QueryBuilder extends Component {
         const columnData = this.getColumn(rules.field);
         return columnData.type;
     }
+    getLabelFromColumn(field) {
+        let label = '';
+        let l = 0;
+        if (this.separator !== '') {
+            const fieldColl = field.split(this.separator);
+            for (let i = 0; i < fieldColl.length; i++) {
+                label += this.getLabelFromField(fieldColl, i + 1);
+                l++;
+                if (l < fieldColl.length) {
+                    label += this.separator;
+                }
+            }
+            return label;
+        }
+        else {
+            const labelItem = this.getColumn(field).label;
+            return labelItem;
+        }
+    }
+    getLabelFromField(field, startIdx) {
+        let fieldName = '';
+        let j = 0;
+        for (let k = 0; k < startIdx; k++) {
+            fieldName += field[k];
+            j++;
+            if (j < startIdx) {
+                fieldName += this.separator;
+            }
+        }
+        return this.getColumn(fieldName).label;
+    }
     processParser(parser, rules, levelColl) {
         let j;
         let jLen;