@syncfusion/ej2-querybuilder 26.1.40 → 26.1.42

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

@@ -1133,7 +1133,7 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
                         popupHeight: ((this.columns.length > 5) ? height : 'auto'), changeOnBlur: false,
                         change: this.changeField.bind(this), value: !isNullOrUndefined(ddlValue) ? [ddlValue] : null,
                         open: this.popupOpen.bind(this, false), treeSettings: { expandOn: 'Click' },
-                        cssClass: 'e-qb-ddt'
+                        cssClass: 'e-qb-ddt', filtering: this.dropdownTreeFiltering.bind(this), close: this.dropdownTreeClose.bind(this)
                     };
                     if (this.fieldModel) {
                         ddlField = __assign({}, ddlField, this.fieldModel);
@@ -1203,6 +1203,72 @@ var QueryBuilder = /** @__PURE__ @class */ (function (_super) {
             this.setMultiConnector(ruleElem);
         }
     };
+    QueryBuilder.prototype.dropdownTreeFiltering = function (args) {
+        var _this = this;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        var proxy = this;
+        var ruleElemID = '';
+        var srcElement = args.event.srcElement;
+        var isClearIcon = srcElement.classList.contains('e-clear-icon');
+        var inputElem = isClearIcon ? srcElement.parentElement.querySelector('.e-textbox') : srcElement;
+        ruleElemID = inputElem.id.split('_filterkey')[0];
+        var ruleElem = document.getElementById(ruleElemID);
+        this.ddTree = getComponent(ruleElem.querySelector('input.e-dropdowntree'), 'dropdowntree');
+        var hierarchicalData = extend([], this.columns, [], true);
+        // Cancel the default filtering.
+        args.cancel = true;
+        if (args.text === '') {
+            this.changeDataSource(hierarchicalData);
+        }
+        else {
+            var matchedDataSource = hierarchicalData
+                .map(function (data) { return _this.nestedChildFilter(args.text, data); })
+                .filter(function (filteredChild) { return filteredChild !== null; });
+            this.changeDataSource(matchedDataSource);
+            setTimeout(function () {
+                proxy.ddTree.treeObj.expandAll();
+            }, 100);
+        }
+    };
+    QueryBuilder.prototype.changeDataSource = function (data) {
+        this.ddTree.treeObj.fields = {
+            dataSource: data,
+            value: 'field',
+            text: 'label',
+            child: 'columns',
+            expanded: 'expanded'
+        };
+        this.ddTree.treeObj.refresh();
+    };
+    QueryBuilder.prototype.nestedChildFilter = function (value, node) {
+        var _this = this;
+        var children = node[this.ddTree.fields.child];
+        if (!children) {
+            return this.isMatchedNode(value, node) ? node : null;
+        }
+        var matchedChildren = children
+            .map(function (child) { return _this.nestedChildFilter(value, child); })
+            .filter(function (filteredChild) { return filteredChild !== null; });
+        if (matchedChildren.length) {
+            node[this.ddTree.fields.child] = matchedChildren;
+            return node;
+        }
+        else {
+            node[this.ddTree.fields.child] = children;
+            return this.isMatchedNode(value, node) ? node : null;
+        }
+    };
+    QueryBuilder.prototype.isMatchedNode = function (value, node) {
+        var checkValue = node[this.ddTree.fields.text].toLowerCase();
+        value = value ? value.toLowerCase() : '';
+        return checkValue.indexOf(value) !== -1;
+    };
+    QueryBuilder.prototype.dropdownTreeClose = function () {
+        if (this.ddTree) {
+            this.changeDataSource(this.columns);
+        }
+        this.ddTree = null;
+    };
     QueryBuilder.prototype.updateDropdowntreeDS = function (columns) {
         for (var i = 0; i < columns.length; i++) {
             if (columns[parseInt(i.toString(), 10)].type === 'object') {