How to implement unique field support in JavaScript Query Builder?

When using the Syncfusion JavaScript Query Builder component, you may encounter a scenario where you need to disable or hide a field value from the dropdown once it has been selected for a rule. This ensures that the same value is not selected again for subsequent rules. The following steps and code snippet demonstrate how to achieve this functionality.

Steps to implement unique field support

To achieve the desired functionality, you can customize the
fieldmodel property of the Query Builder component. Below is the code snippet that demonstrates the customization:

var qryBldrObj = new ej.querybuilder.QueryBuilder({
    dataSource: window.employeeData,
    columns: columnData,
    fieldModel: {
        open: open
    }
});
qryBldrObj.appendTo('#querybuilder');

function open(args) {
    var resultvalue = qryBldrObj.rule;
    var rules = resultvalue.rules;
    var fieldValue = qryBldrObj.columns;
    var value = args.event.target.closest('.e-rule-filter').querySelector('.e-control')
    var fieldData = ej.base.extend([], fieldValue, [], false);
    var field = fieldData;
    result(rules, value, field, true);
    var ddlObj = ej.base.getComponent(value, "dropdownlist");
    ddlObj.dataSource = field;
}

function result(rules, value, field, isGroupAllowed) {
    var rule = qryBldrObj.getRule(value);
    for (var i = 0; i < rules.length; i++) {
        if (rules[i].rules) {
            result(rules[i].rules, value, field, isGroupAllowed);
        }
        else {
            for (var j = 0; j < field.length; j++) {
                if (rules[i].field === field[j].field && rule.field !== field[j].field) {
                    field.splice(j, 1);
                }
            }
        }
    }
}

The open event is triggered when the dropdown popup is opened. It filters the available fields based on the rules already applied, ensuring that a field can only be selected once.

Demo

To see this functionality in action, you can visit the following demo link:
Unique Field Selection Demo

Conclusion

By following the steps above and integrating the provided code snippet, you can easily implement unique field selection in the Syncfusion Query Builder component. This ensures that each field is only used once, preventing any duplication in rule creation.

Additional References

For more information on the Syncfusion Query Builder component and its features, please refer to the following resources:

• Syncfusion Query Builder Documentation
• Syncfusion API Reference: QueryBuilder

If you require further assistance with the Query Builder component or any other Syncfusion controls, please contact Syncfusion support for help.

Conclusion
I hope you enjoyed learning about how to implement unique field support in Syncfusion JavaScript Query Builder.

You can refer to our JavaScript Query Builder feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Query Builder example to understand how to create and manipulate data.
​
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
​
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!