@syncfusion/ej2-querybuilder 31.1.17 → 31.1.22

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

@@ -2989,26 +2989,45 @@ let QueryBuilder = class QueryBuilder extends Component {
         const ddlObj = this.fieldMode === 'DropdownTree' ? getComponent(filterElem, 'dropdowntree')
             : getComponent(container.querySelector('.e-rule-filter .e-filter-input'), 'dropdownlist');
         const column = this.fieldMode === 'DropdownTree' ? this.getColumn(ddlObj.value[0]) : this.getColumn(ddlObj.value);
+        if (target && target.nextElementSibling) {
+            target.nextElementSibling.style.position = 'relative';
+            target.nextElementSibling.classList.add('e-querybuilder-spinner');
+        }
+        const onComplete = () => {
+            if (target && target.nextElementSibling && target.nextElementSibling.classList.contains('e-querybuilder-spinner')) {
+                target.nextElementSibling.classList.remove('e-querybuilder-spinner');
+            }
+        };
         if (typeof itemData.template === 'string' || itemData.template.write === undefined) {
             const args = {
                 rule: rule, ruleID: container.id, operator: tempRule.operator, field: column.field,
                 requestType: 'value-template-create'
             };
             this.trigger('actionBegin', args);
+            onComplete();
         }
         else {
             const template = itemData.template;
+            const templateArgs = {
+                elements: tempElements.length > 1 ? tempElements : tempElements[0],
+                values: rule.value,
+                operator: tempRule.operator,
+                field: column.field,
+                dataSource: column.values,
+                onComplete: onComplete
+            };
+            let writeResult;
             if (typeof template.write === 'string') {
-                getValue(template.write, window)({
-                    elements: tempElements.length > 1 ? tempElements : tempElements[0], values: rule.value,
-                    operator: tempRule.operator, field: column.field, dataSource: column.values
-                });
+                writeResult = getValue(template.write, window)(templateArgs);
             }
             else if (typeof itemData.template !== 'function') {
-                itemData.template.write({
-                    elements: tempElements.length > 1 ? tempElements : tempElements[0],
-                    values: rule.value, operator: tempRule.operator, field: column.field, dataSource: column.values
-                });
+                writeResult = itemData.template.write(templateArgs);
+            }
+            if (writeResult && typeof writeResult.then === 'function') {
+                writeResult.then(() => onComplete());
+            }
+            else {
+                setTimeout(() => onComplete(), 100);
             }
         }
     }
@@ -7355,7 +7374,8 @@ let QueryBuilder = class QueryBuilder extends Component {
             deleteElem: groupElem.querySelectorAll('.e-rule-delete'),
             lockElem: groupElem.querySelectorAll('.e-lock-rule'),
             cloneElem: groupElem.querySelectorAll('.e-clone-rule'),
-            ruleElem: groupElem.querySelectorAll('.e-rule-container')
+            ruleElem: groupElem.querySelectorAll('.e-rule-container'),
+            ddTree: groupElem.querySelectorAll('.e-control.e-dropdowntree')
         };
         elements.deleteElem.forEach((elem, i) => {
             if (isDisabled) {
@@ -7392,6 +7412,7 @@ let QueryBuilder = class QueryBuilder extends Component {
         disableComponents(elements.checkbox, (elem) => getComponent(elem, 'checkbox'), isDisabled);
         disableComponents(elements.radio, (elem) => getComponent(elem, 'radio'), isDisabled);
         disableComponents(elements.multiSelect, (elem) => getComponent(elem, 'multiselect'), isDisabled);
+        disableComponents(elements.ddTree, (elem) => getComponent(elem, 'dropdowntree'), isDisabled);
     }
 };
 __decorate([